I have the following structure for my html:
<div class="christmas_footer_wrapper">
<div class="christmas_footer">
<div class="christmas_bottom">
<h1><span class="christmas_titles otherlink"></span></h1>
</div>
</div>
</div>
The css:
.christmas_footer_wrapper{
margin:225px auto 0 auto;
clear:both;
width:100%;
height:auto;
background-color:#000000;
}
.christmas_footer{
margin:0px auto;
padding:0px;
background-image:url("images/footer.jpg");
background-repeat:repeat-y;
min-height:281px;
width:1261px;
}
.christmas_bottom{
width:1000px;
margin:0px auto;
padding:0px;
}
The issue is that as my background image is 1261px
i have set the width to 1261px
and to repeat on the y axis.
Now as you would imagine as you zoom in and your screen becomes less then 1261px
it pushes the content to the right.
Now i would like to know how to get around this issue as if i set the width to 100%
it bares left and repeats on the x axis and also doesn't remain central.
Has anyone got an idea how to sort this issue?
Thank you in advance.
please try add this property to .christmas_footer
class underneath of background-repeat:repeat-y;
that is,
background-position:center;