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

Setting Background Images Image to use for background

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

Can Set Background on Any Element (tag)

Quick Note on Seamless Backgrounds One free source: http://subtlepatterns.com/ 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!

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

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

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

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

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)

Changing Background Image Position Relative to Element Bottom

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

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

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

Background Attachment Content will scroll while background stays fixed

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.

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.

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

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

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

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

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

Radial Gradient