Background image

With this CSS rule you can control how images sit inside elements. You can repeat patterns along an axis or two, and position it with pixel precision within an element. In the new world of HTML5 you can have multiple background images in one element, but this technique is still not widely supported and we won't be covering it in this example.

Any element can be assigned a background image, but in the following examples we'll use an anchor.

Applying a background image

Here's some HTML:

  • <a href="blog.html" class="button">
  • Take a look at my blog
  • </a>
The underlying markup.

Here's the styled element:

Take a look at my blog

How it works (almost)

Let's walk through how it works.

  • .button {
  • background-image: url('../images/gradient-green-vertical.gif');
  • background-position: 0 0;
  • background-repeat: repeat-y;
  • color: #333;
  • padding: 0.5em;
  • }
The CSS that controls how the element looks.

First up, we'll jump to the last two CSS rules. We've added a colour so the text stands out against the background and have given it some breathing room with 0.5em of padding around all sides.

Gradient
The original image, before CSS is applied. There's not much to it!

The three background rules work like this: background-image lets us target where the image resides in relation to the file that is asking to use it; background-position establishes that the image will sit at the very top left of the element (0 0) and background-repeat with its value of repeat-y; means the pixel high image gets repeated along the vertical axis. Hence the appearance of a gradient.

We use url('') with background-image to target the image we've hopefully stored in a meaningful place within our project's folder structure. Between the single quote marks we write the path to our chosen file based on its location relative to the CSS file that contains this rule.

Note: By creating only a pixel high graphic (but as wide as we need it) we have saved on file and page load times. As we knew it was being repeated, there was no need to provide more image information than was necessary.

One last thing

One thing to take note of in this example is the fact that our gradient graphic doesn't extend to the full width of the button. To fill in the gap, we can just append an background-color rule to our button with the colour that matches the end of the gradient. Like so:

  • .button {
  • background-color: #baea70;
  • ...
  • }
Where the ellipsis signifies the other styles already explained above.

Make sure you get an accurate colour reading from the last pixel of the gradient you want to match. Otherwise it'll look odd. Here's the finished button:

Take a look at my blog

It's of questionable graphical merit, but nonetheless it shows how you can use some of the background CSS rules.

You can repeat this method for gradients that go along the x axis (horizontally) by creating a gradient image that flows in that direction and amending the repeat rule to the x axis.

Future-proof

Nowadays gradients can be applied directly with CSS rules, rather than with an image. This is a much better technique as you don't have to make any images. Instead, you can control the colour values by typing straight into the CSS. Use the Ultimate CSS Gradient Generator to create gradients – it'll generate the CSS for you.

The author heartily recommends this CSS approach for making gradients in HTML.

Background image repeated every which way

The repeat rule is very handy when you want to repeat in all directions. In that case you would only need write repeat. This technique is useful when you want to repeat a pattern, rather than a gradient. Using the same markup as before, here's what you can achieve:

Take a look at my blog

This technique relies more on saving the correctly sized image in Photoshop (or equivalent program) so that it repeats as expected. There may be some trial and error involved before it works as expected.

Here's what the original image looks like before CSS is applied:

Pattern
The original image, before CSS is applied.

Here's the CSS that makes it work:

  • .button {
  • background-color: #888;
  • background-image: url('../images/repeating-chevrons.png');
  • background-position: 0 0;
  • background-repeat: repeat;
  • color: #333;
  • padding: 0.5em;
  • }
The CSS that controls how the element looks.

Remember, you can apply this technique to any HTML element, not just <a> tags. For example the chevron example might work well across the <body> tag, or the gradient example could work on a header that spans the width of your website. The choice is yours!