Background

Over the years, the name background has become somewhat misleading. Yes, of course, these properties will help you set a background (color or image) for your CSS element.

But these days, it’s used for much more than that. How so? Because we figured out that you can obviously set a pretty background for an element … and then leave the element empty. Ta da! You’ve just created anything you want.

As such, many elements on websites are actually designed using their background property, even though there isn’t any text (or “foreground”) inside those elements. I will give a very useful, practical example at the end of this chapter.

Background Color

Use the background-color property, with any color as the value.

Of course, you can supply a color with an alpha channel (such as rgba(255,255,255,0.5)) to give an element a slightly transparent background.

You also have the opacity property which might seem to do the same. But I want to make an important distinction here!

The background color, well, only applies to the background. If you make it slightly see-through, the content (such as text inside the element) will just stay opaque.

The opacity property, on the other hand, will turn the whole element transparent. Whatever is inside, whatever border it has, however it looks like—all of it is made see-through by the same amount.

Background Image

Instead of a solid color, you can also set an image. Like we saw with Masks & Clipping, this provides several properties to control the placement. The allowed values for

• background-image: the image to display.
• background-position: position of the background image
• background-size: size of the background image
• background-repeat: whether it repeats or not (in x and y direction).

And just like the Masks chapter, these properties also take the same values.

I did, however, leave out one bit of information in that chapter. (To prevent overwhelming the reader.)

The -image property accepts a URL to an image. But it also accepts a gradient, which is explained next chapter. And it accepts an SVG path, though this course doesn’t explain what that is. In summary: there are many things that CSS can consider an “image”, and you can provide them all to such a property.

Combining what you know so far

Hopefully, you start to see the power of what you’ve learned so far.

You could …

• Give an element a solid background color.
• Then use masks/clipping to cut the element into a certain shape.
• Tada! Now you have a shape in whatever color you desire, to use as you wish, with pure CSS.

In the example below, try changing the color or div dimensions. It all updates nicely and works just as well!

Or you could …

• Display a piece of text
• In an element with a certain background color
• With a slight, transparent pattern repeated across the background. (So it mostly takes over the color you already added through CSS)

You can change the background color anytime, and all this would look just as good. And this would simply resize based on the text inside or the browser window, no problem. All with a few lines of CSS.

CSS Sprites

This is a practical implementation of background images that many beginners miss: CSS sprites.

Here’s the situation.

Most websites have a lot of icons or images used repeatedly throughout the design. You could add them all as separate image files, then use an HTML <img> element to display them everywhere.

But this isn’t great.

• Lots of files means a cluttered filesystem and more requests from the server.
• This is hardcoded: if you ever change anything, you need to update all those images everywhere.
• For many purposes (not all) it’s easier to control the size and look of background images than regular image tags.

So, what do you do? You turn those icons into CSS sprites.

• Create one image with all the icons lined up next to each other—the “spritesheet”
• Whenever you want to use an icon, load the spritesheet as the background image …
• … then modify the position so it displays the correct one.

See the example below. It uses the spritesheet that powers my main Pandaqi website (the game studio).

Try modifying the x-value of the background-position property to see different icons! You should move in increments of 64px (as that’s how large the icon is).

Why is the x-position negative? Try to figure out what exactly we’re doing here. We are shifting the background image to show different icons. In other words, to show the second icon, we move the background image more to the left. To show the third icon, we’d need to move it even more to the left. As such, we’re moving it in the negative x direction, hence the minus sign.

With this simple trick, I can control my icons through CSS only (with just a few lines), and only need to load one image on every page.

That’s just one example of the power of backgrounds and how they’re used on the modern web. I hope it gets your mind going about how you can use the simple tools of CSS to achieve great designs.