CODEWITHSUNDEEP
csswordpressfooter
Richard Pascal
Richard Pascal

Reputation: 113

Full width background image in footer

I am working with 960gs (in my local environment) and I insert this CSS code into my footer div:

## style.css

#footer{
    background:url("images/footer.png")  repeat-x scroll top transparent; 
    height: 130px; 
    width:100%; 
    overflow:hidden;
}

## footer.php

<div id="footer">   
    <div id="nav" class="container_12">  </div>
    <div id="endfooter" class="container_12">
        <div id="copyright" class="grid_3 alpha"> </div>  
        <div id="design" class="grid_3 omega">  </div>  
    </div> <!-- endfooter -->
</div> <!-- end footer -->

The problem is that the page does not show the footer div at full width with the background covering the entire div. It just shows the image at 960px. What I am doing wrong?

Upvotes: 2

Views: 9553

Answers (2)

Hasan Ismayilov
Hasan Ismayilov

Reputation: 45

I think that the footer is inside some container and the max-width of that container is limited to 960px. So you can detect that container and increase its width. Or just you can give 100vw(viewport width) to the footer width:

#footer{
    background: url("images/footer.png")  repeat-x scroll top transparent; 
    height: 130px; 
    width: 100vw;     /* new */
    overflow: hidden;
}

Upvotes: 0

s_ha_dum
s_ha_dum

Reputation: 2850

It took me awhile before I realized what you are trying to do. You are trying to get a background image to scale, correct? You can't do that, at least in CSS2. Background images do not scale. You can tile them (repeat) but you can't scale them. If you want the image to scale you have to use an <img> tag.

If you are willing to depend on CSS3 standards you can use background-size

#footer{
    background:url("images/footer.png")  repeat-x scroll top transparent; 
    background-size:100% 130px;
    height: 130px; 
    width:100%; 
    overflow:hidden;
}

I can't vouch for background-size but w3schools does claim good browser support.

Upvotes: 0

Related Questions