1. Controlling Backgrounds
Any HTML Element Can Have a Background Set and Controlled

2. Setting Background Images
Image to use for background

3. Setting Background Images
Good idea to still set background-color
in case there’s some problem with the picture, the background color will show instead
By default:
Will start at upper left-hand corner
Will tile across and down the page to fill the space
To get the look of a continuous background, you need to find seamless tiles

4. Can Set Background on Any Element (tag)

5. Quick Note on Seamless Backgrounds
One free source:
You have to add color yourself if you don’t like default
Unzip
Open in Fireworks
Lay rectangle over entire thing
Choose hue you like
Turn opacity way down
There are probably other free sources – feel free to Google for them!

6. Changing Amount of Repeat: repeat-y
Tile vertically down the element
background-color shows through where the background-image is NOT repeating

7. Changing Amount of Repeat: repeat-x
Tile horizontally across the element

8. Changing Amount of Repeat: no-repeat
Tile does NOT repeat in either direction

9. Changing Amount of Repeat: round
Tile is enlarged to the point where no part of the pattern gets cut off on right edge
Without round, tile is cut off at edge
With round, tile is NOT cut off

10. Changing Amount of Repeat: space
Tile is enlarged to the point where no part of the pattern gets cut off on right edge
Without space, tile is cut off at edge
With space, tile is NOT cut off, instead spaced across page (but not resized)

11. Changing Background Image Position Relative to Element
Bottom

12. Changing Background Image Position Relative to Element
center
left
right
top
Can combine them too:
top left

13. Positions make sense based on art you’re using
Example 1:

14. Positions make sense based on art you’re using
Example 2:

15. Background Attachment
Content will scroll while background stays fixed

16. Background-Attachment: Fixed
Will also position image at true bottom of page
Example:
This guy’s down here now.
Careful though – if content was longer, would still roll over top of him.

17. Gradients Warning: Known to cause EXTREME happiness.
Will only display if you toggle compatibility view in Internet Explorer.
Works fine in Chrome without doing anything extra.

18. Toggling Compatibility View for IE
1) Click the gear icon in upper-right
2) Choose Compatibility View Settings
3) Uncheck the first box

19. Linear Gradient Gradients = fade between colors
Placed in background-image (even though it’s not an image)
Should still set background-color in case someone’s still using a stone-age browser

20. You can add more colors into the sequence if you want!
Linear Gradient
Start color
Stop color

21. Linear Gradient – Being Smarter
Use color it fades to for seamless look
Stop tiling!

22. Linear Gradient – Change Direction
Direction of fade.
Available options:
to right
to left
to top
to bottom

23. Radial Gradient