Lesson 13

Background images

Using images in your design

Images are often used in the content of websites, but they are frequently used in the design of a page as textures, background-images and borders. When used as a design element, images are placed on the page using CSS.

We use the background property to apply a background image to a page. A background image is contained within the total size of an element which includes padding but not the margin. The body is an exception to this rule.

Play
Go to the next lesson

index.html

style.css

the web page

New Window

Tasks

  • Reduce the size of the body's background image (hint: background-size can take a value in pixels, as well as "cover")
  • Make the body's background image tile
  • Bonus task: Find out what border-radius does by changing its value on the wrapper
Next Lesson
Practical understanding of using background images in page designs, as well as responsive design using Media Queries. Badge

Advanced Design with CSS

Congratulations! You’ve just earned the Advanced Design with CSS badge!

If you'd like to send this badge to your Mozilla backpack, just fill out the form below.

This will push your badge to the Mozilla Badge Backpack which is governed by the Mozilla Badge Backpack Terms of Use and Privacy Policy.