HTML & CSS: Backgrounds

It's not uncommon to want to set a background on an inline or block element (or inline-block for that matter!). This can be accomplished extremely easily in CSS depending on what kind of background you want to set - for the most part, types of backgrounds will be separated into image backgrounds and solid colour backgrounds (there are of course other kinds like non-image gradients but we'll learn about these later).

Solid Colour Backgrounds

Solid colour backgrounds can be put on any inline, inline-block or block elements by using the background-color property in CSS and then specifying a colour value (as we've talked about before this can be HEX, RGB or any other kind of CSS-supported colour). Perhaps the most obvious example usage is simply setting a background color for the body of the document, I'm going to just go with a light grey:

1
2
3

body {
	background-color: #EEE;
}

Image Backgrounds

Much like solid colour backgrounds, image backgrounds can be set on any inline, inline-block or block element in CSS using a single property. You probably aren't surprised to hear that that property is named background-image. We usually (but not always, this is where more complex things like gradients can come in) set this to a URL value. We specify URL values in CSS by writing either a relative (path in relation to the stylesheet, like images/logo.png) or fixed (a path which always stays the same) path inside single or double quotes and then surrounding this in the "functional notation" of url -- This isn't easy to explain in words, but looks something like url('/path/to/file.png').

Note that when specifying paths, ../ means "up a directory" - so /folder/anotherfolder/../ actually results in /folder/.

But anyway, let's just say we wanted to set the body background to an image (let's just pretend there is an image called 'background.png' which is in the same folder as the stylesheet):

1
2
3

body {
	background-image: url('background.png');
}

Repeating and Positioning

When a background image is used, often it's necessary to want the background image repeated or positioned differently. Luckily for us, these things are for the most part contained in simply CSS properties.

Repeating rules are specified using the background-repeat property (surprise surprise!). This can be set to one of four values:

  • repeat - The image is repeated horizontally and vertically
  • repeat-x - The image is repeated horizontally only
  • repeat-y - The image is repeated vertically only
  • no-repeat - The image is not repeated; only one copy of the image is drawn

Positioning rules are specified using the background-position property (once again, I'm sure this is a huge surprise). This also has a bunch of presets and takes two values (separated by a space) - the first of which is the horizontal position and the second of which is the vertical position. These x and y values can be set to a variety of different things in a variety of different measurements, these include:

  • top, right, bottom, left and center - These values (left & right for horizontal positioning, top & bottom for vertical positioning and center for either) can be used for specifying the position of the image (obviously top left is in the top left). If only one keyword is specified, the other will be center.
  • X% - Percentages can be used for either vertical or horizontal positioning -- 0% 0% is the top left and 100% 100% is the bottom right. As with the word positions, if only one value is specified the other will be center.
  • xpos ypos - Units can be in pixels (px) or any other basic CSS measurements. Works much like percentages.
  • inherit - This specified that the setting should be inherited from the parent element.

An example usage of both the repeat and positioning properties might be setting the body background image to something simple, let's just say the logo of this website, and then setting its position to the top right and it's repeating pattern to repeat-y:

1
2
3
4
5

body {
	background-image: url('http://www.dev-hq.net/images/logo.png');
	background-repeat: repeat-y;
	background-position:  top right;
}

Shorthand

As is the case with many sets of CSS properties, there is a really nice shorthand property for all this background stuff. Be prepared to be blown away by the huge surprise in it's name - it's called the background property!

You can simply give this a colour to make it act like background-color (something like background: red;) or you can give it all the set of properties in the order of colour, image, repeat and position, for example:

1

background: #eee url('background.png') repeat-y top right;