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!
to
#loweraddbackground-size: 100% 100%;and remove
height:120px;as it will force background to stretch on odd ratio screen.