Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser

To modify a background image's size, you can use the background-size property.

This exercise will focus on two of the most common values of the background-size property:

  1. cover - expands the image as large as possible to cover the full width or height of a container. If the dimensions of the container (say, a div) are larger than the dimensions of the image, the image will become distorted. This value is best for images that don't communicate important content to the user, like background images.

  2. contain - expands the image as large as possible, but the image will be letterboxed, which means it won't cover the full width or height of a container.

div.header { height: 400px; width: 100%; background: url("#") no-repeat right center; background-size: cover; }

In the example above, the background image will expand to cover the full size of the div.

report a_bug
If you see a bug or any other issue with this page, please report it here.