Foundation HTML5 with CSS3

(Steven Felgate) #1

Chapter 5


The default value of background-repeat is repeat, which you can use to override another value in
another rule if necessary. You can also disable tiling altogether with the value no-repeat:


body {
background-image: url(images/background.png);
background-repeat: no-repeat;
}


Figure 5-22 shows the effect of the no-repeat value; the image appears only once and doesn’t tile in either
direction.


Figure 5-22. The background image appears only once and doesn’t repeat


If your background image is larger than the element it decorates, the element’s dimensions act like a
window defining the portion of the background that can be seen. In Figure 5-23, the background image is
much larger than the element in which it appears so part of the image is hidden.


Figure 5-23. Only part of the background image is visible because it’s much larger than the element to which it’s been
applied

Free download pdf