2. Fill in the blank if you don't want the image to repeat.
background-repeat: _________;

That's correct. Well done!

The correct code:
no-repeat

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

3. Fill in the blank if you don't want the image to repeat.
________________ no-repeat;

That's correct. Well done!

The correct code:
background-repeat:

Press Tab or click button to advance to next exercise.

4. Code the line that styles a background-image to not repeat. Don't indent.

That's correct. Well done!

The correct code:
background-repeat: no-repeat;

Press Tab or click button to advance to next exercise.

5. Drag-and-drop: Holding down the left mouse button, drag the pieces of code onto the screen to position a non-repeating background-image in the upper-right corner. (Remember, the order counts in specifying the position.)

6. Click in the box and type the next character. I'll autocomplete. Don't type spaces or carriage returns. When the exercise is complete, I'll turn the exercise number green.

Position a background-image in the lower-left corner. (Remember, the order counts in specifying the position.)

7. Fail-safe coding. If you type the wrong character, I'll cancel the keystroke. Type spaces. When the exercise is complete, I'll turn the exercise number green.

Position a background-image in the middle the screen.

8. To make the background-image move with the rest of the content, fill in the blank.
background-attachment: ______;

That's correct. Well done!

The correct code:
scroll

Press Tab or click button to advance to next exercise.

9. To make the background-image not move with the rest of the content, fill in the blank.
______________________ fixed;

That's correct. Well done!

The correct code:
background-attachment:

Press Tab or click button to advance to next exercise.

10. Code the line that positions a background-image. Your choice of position. (Remember, the order counts.) Don't indent.

That's correct. Well done!

Example:
background-position: right (or left or center) top (or bottom or center or just center);

Press Tab or click button to advance to next exercise.

11. Code two lines that position a background-image and tell it whether to scroll. Your choice of position and whether to scroll or not. Don't indent.

That's correct. Well done!

Example:
background-position: right (or left or center) top (or bottom or center or just center);
background-attachment: scroll (or fixed);

Press Tab or click button to advance to next exercise.

12. Code three lines that keep a background-image from repeating, position it, and tell it whether to scroll. Your choice of position and whether to scroll or not. Don't indent.

That's correct. Well done!

Example:
background-repeat: no-repeat;
background-position: right (or left or center) top (or bottom or center or just center);
background-attachment: scroll (or fixed);

Press Tab or click button to advance to next exercise.

The next several exercises are timed. If you type slowly or dislike time pressure, feel free to increase the allotted time.

13. Time goal: 35 seconds. Position a background-image in the middle the the screen.

Press Tab or click button to check answer.

The correct code:
background-position: center;

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

14. Time goal: 15 seconds. To make the back-ground image move with the rest of the content, fill in the blank.
background-attachment: ______;

Press Tab or click button to check answer.

The correct code:
scroll

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

15. Time goal: 25 seconds. To make the background-image not move with the rest of the content, fill in the blank.
______________________ fixed;

Press Tab or click button to check answer.

The correct code:
background-attachment:

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

16. Time goal: 25 seconds. Code the line that positions a background-image. Your choice of position. (Remember, the order counts.)

Press Tab or click button to check answer.

Example:
background-position: right (or left or center) top (or bottom or center or just center);

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

17. Time goal: 60 seconds. Code two lines that position a background-image and tell it whether to scroll. Your choice of position and whether to scroll or not. Don't indent.

Press Tab or click button to check answer.

Example:
background-position: right (or left or center) top (or bottom or center or just center);
background-attachment: scroll (or fixed);

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

18. Time goal: 100 seconds. Code three lines that keep a background-image from repeating, position it, and tell it whether to scroll. Your choice of position and whether to scroll or not. Don't indent.

Press Tab or click button to check answer.

Example:
background-repeat: no-repeat;
background-position: right (or left or center) top (or bottom or center or just center);
background-attachment: scroll (or fixed);

Press Tab or click button to advance to next exercise.

Press Tab or click button to advance to next exercise.

19. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)

Click button to advance.

20. Access this live coding exercise at JS Fiddle. When you've completed the exercise, close the JS Fiddle window, and you'll be returned to this page. (If JS Fiddle displays a warning message saying that your changes will be reset, click Leave this Page.)

Click button to advance.