Background Images, Amigos!

Properties

There are a few different background properties:

background-image

This property is the location of the image itself, for example: h1 { background-image: url('http://website.com/img/background.jpg'); }
or

h1 { background-image: url('images/background.jpg'); }

background-color

This allows us to add colour to a background. An example in CSS would like like this: h1 { background-color: green; }

background-repeat

This is how the image will repeat. The value can be any of the following:

background-repeat: repeat;

This repeats on both the X and Y axis, and will essentially tile the image across the entire background.

background-repeat: repeat-x;

This repeats the background on the X axis, or horizontally.

background-repeat: repeat-y;

This repeats the background on the Y axis, or vertically.

background-repeat: no-repeat;

This shows the image only once, without repeating.

background-position

This is the actual position of the background image within it's container. The values can be: background-position: top; background-position: right; background-position: bottom; background-position: left; background-position: center;
It can also be a percentage, length, or combination, like so:
background-position: 50px 20%;

Shorthand!

There's a quick way around background images, and you don't necessarily have to type out all of the above code to set up your background images the way you want them.

background

The "background" shorthand can handle them all in one! background: green url('images/background.jpg') top left no-repeat;

Examples