Example: Connected Background Image
This example illustrates how to display a background image that appears to be one image that is positioned behind the header and the first section in the article portion of a web page. In reality, there are two images. The first image in this example is the top half of the original image and is positioned from the bottom center of the header. The second image is the bottom half of the original image and is positioned at the top center of the first section in the article.
Requires CSS
The following is an example of the CSS that is required for this example.
body.example.connected.background header {
background-image: url(../images/website/2048x1024-top.png);
background-repeat: no-repeat;
background-position: center bottom;
}
body.example.connected.background .example.connected.background.bottom {
background-image: url(../images/website/2048x1024-bottom.png);
background-repeat: no-repeat;
background-position: center top;
}
Required Images
The follow two images where used as the background images in this example.
