In lesson 10, we learned how to background-repeat to control image tiling. Now we apply this technique to keep a border background image (or "border back") from tiling on a page.
The problem with border backs in with straight HTML is that they tile to the right when they are viewed on monitors that are wider that the image. With CSS, using background-repeat : repeat-y, the image only tiles down.
Gnubee's Gnotebook is a collection of links pages on a variety of topics. It uses a border background image that is 800 pixels wide. The background image repeats to the right when viewed on a monitor that is wider than 800 pixels. I am in the process of switching these pages to CSS using background-repeat : repeat-y to stop the tiling.
Here are some links to screenshots of my page at different pc monitor widths. They have been resized for better veiing on WebTV. For comparison, WebTV is 544 pixels wide. You can see the background tiling on the right on screens wider than 800 pixels in the "Before" screenshots. You can see the page without tiling in the "After" screenshots.
Index page, 640 wide:
Before
After
Index page, 800 wide:
Before
After
Index page, 1024 wide:
Before
After
Index page, 1600 wide:
Before
After
"Aviation", 1024 wide:
Before
After
Border background images or "border backs") usually have an image on the left and a solid color on the right. Since the image will "stop", there will be some page "left over" to the right of the image, so your page background-color should be the same as the right portion of the border back. Also, I don't want my text to be on top of the left image (notebook rings) of my border back, so I need to add a left margin.
body {
background-color:#87cefa;
background-image:url(../bg/blringbinder.gif);
background-repeat: repeat-y;
margin-left:6em;
}
Happy coding!
Gnubee
