CSS-Prozentprobleme

Question

Ich habe ein Fußzeilenbild, das in einem Fußzeilen-div angezeigt wird. Das Fußzeilenbild ist größtenteils schwarz, daher möchte ich ein Div im rechten und linken Bereich der Fußzeile schwarz darstellen und bis zum Rand der Seite reichen. Ich kann das nicht erreichen. Ich würde jede Hilfe schätzen. Unten ist mein CSS-Code und dann HTML-Code der zugehörige: CSS:

body{ 
width: 1196px; 
    margin-top: 2px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    font-family: Verdana, Geneva, sans-serif; 
} 

.footer { 
    width:1196px; 
    float: left; 
    height: 572px; 
} 

HTML:

<div class="footer"><img src="images/footer.jpg" width="1196" height="572"/></div> 

Answer 1

Eine Möglichkeit ist die feste width von body zu entfernen und das geben width:100% zu footer dann können Sie Zentrieren footer img mit display:block + margin:auto

body { 
 
    margin: 2px auto 0; 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
.footer { 
 
    max-width: 100%; 
 
    background: black 
 
} 
 
img { 
 
    display: block; 
 
    margin: auto 
 
}

<div class="footer"> 
 
    <img src="//dummyimage.com/1196x572" /> 
 
</div>