Colored Background

Add a background color of #7cdef2 to the div.

Hint: Make sure your properties are in alphabetical order.

Adding a Background Image

Add a background image using a file called wood.jpg, which is located in a subfolder called images, to the div.

Hint: Make sure your properties are in alphabetical order.

Repeating Background Images

By default, background images repeat in both directions, but we can control that. Add the CSS to make the background image repeat on the X-axis only.

Hint: Make sure your properties are in alphabetical order.

Non-repeating Background Images

On second thought, let's not have the background repeat at all. Change the CSS so that the background image doesn't repeat at all.

Hint: Make sure your properties are in alphabetical order.

Positioning Background Images

Let's move where the background image is located. Using keywords, add the CSS to make the background image sit on the right edge of the div and center vertically within the div.

Hint: Make sure your properties are in alphabetical order.

Centering Background Images

Actually, let's center the background image on both the horizontal and the vertical axis. Change the CSS to make the background image center in both directions. To do so, you only need to remove something.

Backgrounds and Scrolling

For an interesting effect, add the CSS to make the background image seem to stay in place as the user scrolls down the page.

Hint: Make sure your properties are in alphabetical order.

True or False: Background images are applied within the HTML, not within the CSS.

Scaling Background Images

This background image is nice, but the top gets cut off because it is too big to fit within the element. Using a keyword, set the image to always fit entirely within the container.

Hint: Make sure your properties are in alphabetical order.

Scaling Background Images

Similar to the last image, this one is too big to fit within the element. But this time we're less concerned about seeing the entire image than about making sure the full element is covered by it. Using a keyword, add the CSS so that the element is always filled be the image and we always see as much of the image as possible..

Hint: Make sure your properties are in alphabetical order.