how to line up several divs with background images - css

Question

I have a very large image to use as a background image. Because the image is so large, I have divided it into three images that can be stacked one on top of the other.
I'm putting the images in as background images with the property "cover":
<div class="screen" id="header1"></div>
<div class="screen" id="header2"></div>
<div class="screen" id="header3"></div>
css:
#header1
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
max-height: 949px;
background: url('images/bg1_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
#header2
{
background-color: #000;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 947px;
background: url('images/bg2_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;padding: 0;
margin: 0;
}
#header3
{
background-color: #000;
width: 100%;
height: 100%;
max-width: 1920px;
background: url('images/bg3_landscape2.png') no-repeat center center;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 0;
margin: 0;
}
The problem is that the pattern in the background image doesn't line up.
How do I make multiple background images line up no matter how wide the screen is?

Answer 1

So... there's a few things going on here with this:
1st question : You haven't done anything to make the div's overlap in your CSS, so they are going to appear just one after the other in the document flow of the browser. For example, view this fiddle here:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
}
div:last-child {
background: blue;
}
If you want them to all overlap perfectly, aka to be superimposed, then they need to be positioned absolutely on top of each other, like this:
div:first-child {
background: red;
}
div {
background: green;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:last-child {
background: blue;
}
The other question is why you would break a large background image into 3 smaller images. We refer to that as image slicing, which is really not optimal. It takes 3 http requests instead of one to retrieve that image, which is more overhead than just getting the smaller one quite often. Also, it's a background image, so it won't prevent the document from fully loading until the image has loaded, as an inline image would.
Hope this helps.