How to make Footer background stretch the width of the screen

StackOverflow https://stackoverflow.com/questions/20446475

Question

firstly I just would like to put out there I'm not very good at coding, and this is sorta a first for me. I'm having some trouble with the footer; the background of the footer, when it's too small for bigger computer screens, just repeats itself like this: http://prntscr.com/29fxeu

I was hoping to get the background so that it automatically adjusts to each screen width to fit the whole way across. Is that possible? I've got it up on JSFiddle here: http://jsfiddle.net/HXs2A/1/

And here's the HTML used: (forgive me if there's errors)

<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
  </div>
<!-- Footer border End-->
<div id='lower'>

<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 1' preferred='yes'/> 
</div>
<div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 2' preferred='yes'/> 
</div>
 <div id='lowerbar-wrapper'>

<b:section class='lowerbar' id='Column 3' preferred='yes'/> 
</div>
<div style='clear: both;'/>
</div>
</div>
</body>

And the CSS:

#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222; 
} 
#lower-wrapper { 
background: none; repeat scroll 0 0 #222222; 
margin:auto; 
padding: 20px 0px 20px 0px; 
width: 100%;
border:0; 
} 
#lowerbar-wrapper { 
background: none; repeat scroll 0 0 #222222; 
float: left; 
margin: 0px 5px auto; 
padding-bottom: 20px; 
width: 30%;
text-align: justify; 
color:#ddd; 
font: bold 12px Arial, Tahoma, Verdana; 
line-height: 1.6em; 
word-wrap: break-word; 
overflow: hidden; 
} 
.lowerbar {margin: 0; padding: 0;} 
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} 
.lowerbar h2 { 
margin: 0px 0px 10px 0px; 
padding: 3px 0px 3px 0px; 
text-align: left; 
border:0; 
color:#46A28D; 
text-transform:uppercase; 
font: bold 14px Arial, Tahoma, Verdana; 
} 
.lowerbar ul { 
color:#fff; 
margin: 0 auto; 
padding: 0; 
list-style-type: none; 
} 
.lowerbar li { 
display:block; 
color:#fff; 
line-height: 1.6em; 
margin-left: 0px !important; 
padding: 0px; 
list-style-type: none; 
} 
.lowerbar li a { 
text-decoration:none; color: #DBDBDB; 
} 
.lowerbar li a:hover { 
text-decoration:underline; 
} 
.lowerbar li:hover { 
display:block; 
background: #222; 
}

Thanks!

Was it helpful?

Solution

to #lower add background-size: 100% 100%;

and remove height:120px; as it will force background to stretch on odd ratio screen.

OTHER TIPS

You mean background-size? Following code change works for me (CSS3).

#lower { 
margin:auto; 
padding: 0px 0px 10px 0px; 
width: 100%; 
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png); 
background-size:100% 100%;
background-repeate: no-repeat;
}

See http://www.w3schools.com/css/css3_backgrounds.asp

However, older browsers might give different results.

#lower { 
  margin:auto; 
  padding: 0; 
  width: 100%; 
  height: 120px;
  background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
  background-size: cover;
}

*Note: When you assigning attributes to element in HTML use " instead of '

Right <div id="lower">

Wrong <div id='lower'>

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top