Question

This is a follow-on from a previous SO question Anchoring CSS Repeating Background Image but sufficiently different to treat as a separate question.

The jsFiddle http://jsfiddle.net/By2xj/ demonstrates the concept. I have a banner image (center) which then requires repeating images on the left and right which will display and repeat depending on the width of the browser window. The proviso is that the left and right images must be locked to the edge of the center banner image. You can see this effect if you expand the jsFiddle Result window – the left and right repeating images always remain locked to the side of the center banner image and expand out from that point.

So all this is working, but I have used a table to achieve this effect, as the CSS suggested in the previous Stack Overflow question didn’t fully work and was a bit browser dependant, particularly not playing with older browsers.

With this table based solution, I would like to always keep the centre banner image centered, even when the browser width is smaller than the banner. If you reduce the size of the jsFiddle Result window you will see that when the browser width is smaller than the banner, the banner sticks to left-alignment rather than being centered.

So my question is how can I always keep the center banner center aligned (or perhaps, more correctly, the entire table center aligned), even when the browser width is smaller than the banner width (and containing table cell)?

Answer 1

It’s a bit cheat but, I hope what you’re looking for.

http://jsfiddle.net/By2xj/8/

what’s happening is, I’m creating a div in that middle cell, and position absolute, after that, centering it to screen. that div will remain centered all times, regardless size of the browser window.

for the record:

<table id="banner-table">
    <td id="left-image"></td>
    <td id="center-image"><div></div></td>
    <td id="right-image"></td>
</table>​

css:

 #banner-table {

    width: 100%;
    height: 200px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

#left-image {
    background-image: url(http://www.dummyimage.com/100x200/ff0303/ffffff.png&text=Left);
    background-position: right;
    background-repeat: repeat-x;
}

#center-image {

    width:400px;


}
#center-image div {
    top:0; left:50%;
    margin-left:-200px;
    width:400px;
    height:200px;

    position:absolute;
    background-image: url(http://www.dummyimage.com/400x200/0021fa/ffffff.png&text=Center);
    background-position: center;
    background-repeat: no-repeat;
}
#right-image {
    background-image: url(http://www.dummyimage.com/100x200/1f9900/ffffff.png&text=Right);
    background-position: center center;
    background-repeat: repeat-x;}​