Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
This chapter is from the book

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;
  • + Share This
  • 🔖 Save To Your Account