- Prepare Images
- Float Images
- Place Images
- Add Background Images
- Extra Bits
Add Background Images
We’re not using them on the Alpaca Repo site, but it’s not uncommon to want to use background images on your page, so we’re covering them here. A background image can be any graphic, but they are usually small images that can tile seamlessly when they are repeated. You can use CSS to tile them over the whole page (the default) or tile the image in the horizontal (x) direction or the vertical (y) direction. Of course, you don’t have to use a background image on just the <body> tag so that it covers the whole page; you can add a background image to any div or other block element.
To add a background image, just add this property to a block element:
background-image: url(images/background.jpg);
To control the horizontal and vertical tiling of the image, use one of these properties:
background-repeat: repeat-x; background-repeat: repeat-y;