In our last lesson, we learned how to display background images with CSS in web pages. Now we will learn how to control how a background image repeats.
In straight HTML, background images automatically tile (repeat) to fill up a whole webpage.
With CSS, you can control a background image so it repeats horizontally, vertically, both, or not at all.
The style statements to control how a background image repeats are:
background-repeat : repeat
background-repeat : repeat-x
background-repeat : repeat-y
background-repeat : no-repeat
repeat repeats the image downward and to the right from the starting position (image fills the whole page or element)
repeat-x repeats the image to the right of the starting position (image tiles horizontally)
repeat-y repeats the image downward from the starting position (image tiles vertically) - this can be used with border backs
no-repeat keeps the background image form repeating - you will only see the image itself once (no tiling at all)
You can use background-repeat in an element declaration, as a class or with the style attribute:
Declaration (stars across the top of a page)
body {
background-image:url(stars.gif);
background-repeat: repeat-x;
}
.stars {
background-image:url(stars.gif);
background-repeat: repeat-x;
}
style="background-image:url(stars.gif);
background-repeat: repeat-x;"
I made a separate page showing background=repeat:repeat-x.
I also made a separate page that shows how to use background-repeat : repeat-y to keep border background images from tiling on wide monitors.
Background repeat can be seen on pc's for any element, but WebTV only supports background-repeat in the body element. This means that background images will tile in div's and paragraphs when viewed on WebTV regardless of background-repeat.
Make a sample page and use background-repeat to control a background image.
Happy coding!
Gnubee
