Dividing my background into two parts has been a challenge.
Background Image #1
Endlessly Repeating Background Image #1
Background Image #2
Endlessly Repeating Background Image #2
In CSS, creating a background with multiple elements is not as simple as it seems:
#leftColumn {
background-image:url('http://i53.tinypic.com/2ezlb7n.png');
background-repeat:no-repeat;
background-position:right top;
background-z-index:1;
background-image:url('repeat.png');
background-repeat:repeat-x;
background-z-index:0;
}
The desired outcome is:
[ BACKGROUND LEFT ]
[ CONTENT ]
[ BACKGROUND RIGHT ]
The content area should always be 768px wide, while the backgrounds on both sides need to display as much as possible.
To my surprise, I managed to solve it on my own. Here's the code that did the trick:
<style type="text/css">
* {
padding:0px;
margin:0px;
}
html, body {
width:100%;
height:100%;
background-color:#333333;
}
#leftColumn {
background-image:url('http://i54.tinypic.com/aa83lw.png');
background-repeat:repeat-x;
display:none;
}
#rightColumn {
background-image:url('http://i52.tinypic.com/kcjdwi.png');
background-repeat:repeat-x;
display:none;
}
#leftImage {
background-image:url('http://i53.tinypic.com/2ezlb7n.png');
background-repeat:no-repeat;
background-position:right;
width:100%;
height:128px;
}
#rightImage {
background-image:url('http://i56.tinypic.com/noh6on.png');
background-repeat:no-repeat;
width:100%;
height:128px;
}
#content {
width:768px;
background-color:#666666;
}
@media only screen and (min-width:769px) {
#leftColumn, #rightColumn {
display:table-cell;
}
}
</style>
<table width="100%" height="100%">
<tr>
<td id="leftColumn" align="right"><div id="leftImage"></div></td>
<td id="content"> </td>
<td id="rightColumn" align="left"><div id="rightImage"></div></td>
</tr>
</table>