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;

more