HTML — Background Images

So you think you know HTML backgrounds? Well maybe you do and maybe you don’t. I created this HTML tutorial to solidify my own knowledge on how HTML backgrounds work. And hopefully it helps someone out there to get a big picture on the subject.

Today only — Get a Free CSS Book (Free Giveaway) on my Twitter.

Grab your copy of CSS Visual Dictionary incl. diagrams of all CSS properties.

To get a good idea of how flex works try flex layout editor on this page.

Now onto the cute kitten backgrounds…

Source image to be used for this HTML backgrounds tutorial.
PS: Image specimen is this adorable kitten on a stripey background. I don’t know whose cat this is. So if it is your cat… copyright goes to you.
If you’re reading this & can point me to the original source I will post a link back.
I cat seem to easily locate it. But it’s pretty much best kitten photo for this tutorial.

Background Images in HTML

If the element’s dimensions are bigger than those of the source image, the image will be repeated within the body of that element — repetitively filling the remainder of the element’s sides with the contents of the image. It’s almost like stretching infinite wall paper over an element.

To set the background image to any element you can use the following CSS commands.

background: url(‘kitten.jpg’)

Or alternatively…

background-image: url(‘kitten.jpg’)

You can also use internal CSS by placing this CSS code between <style></style> tags.

Let’s take a look at the same kitten background… except this time around with no-repeat value set to additional background-repeat property:

You can prevent the background image from repeating by setting either the individual property:

background-repeat: no-repeat

Or together with the image source file using background:

background: url(“kitten.jpg”) no-repeat

The source image can be also set individually:

background-image: url(M.png)

The last CSS command will assume default values for all of the other existing background properties.

The CSS property background-size

The background-size property controls… you guessed it the size of the background image. Using it it is possible to specify how to scale it. Different values will produce various tile effects and patterns.

Values: unset, none, initial, auto, percent, percent percent (separated by space for x-axis and y-axis respectively,) cover and contain:

How background-size affects image patter and stretch.

By combining background-repeat: no-repeat; with background-size: 100% it is possible to stretch the image only horizontally, across the entire width of the element:

What if you want to repeat background vertically but keep it stretched across the width? No problem, simply remove no-repeat from previous example.

This is what you will end up with:

This HTML / CSS background technique is used for sites whose content stretches vertically over a long area of space. I think the Blizzard site uses this technique. Sometimes you want to cut it off, and make it static. Other times you want it to go on forever vertically. This will depend on the vision of your design.

Sometimes it is needed to stretch the image across to fit the bounding box of an element. This often comes at a price of some distortion, however. CSS will automatically stretch the image according to some automatically-calculated percentage value.

Needless to say, this effect will work best on square HTML elements.

All you need to do is set background-size: 100% 100% to achieve this result.

Note here, 100% 100% is repeated twice. The first value tells CSS to stretch the image vertically and the second 100% does the same horizontally. You can use values between 0–100% here although I do not see many cases where this would be necessary.

Specifying Multiple Values

In HTML, whenever you need to specify multiple values they are often separated by a space. Vertical coordinates (Y-axis or height) always come first. Sometimes values are separated by comma. Example? When we need to specify multiple backgrounds they are usually separated by comma and not the space character. (As we will see from the last section in this tutorial.)

Using background-position

This is background-position: center center at work here.

You can force the image to be always in the center but lose repetitiveness of the pattern by specifying no-repeat value background-repeat property:

Center the image:

background-position: center center;

Turn repeat off:

background-repeat: no-repeat;

You can repeat the image across the x-axis only (horizontally) using repeat-x:

This is repeat-x in action.

You can easily center and repeat the image only horizontally by supplying repeat-x as the value for the background-repeat property.

To the same effect but on the y-axis repeat-y property can be used:

Like any other CSS property you have to juggle around the values to achieve the results you want. I think we covered pretty much everything there is about backgrounds. Except one last thing…

Multiple Backgrounds

It is possible to add more than one background to the same HTML element. The process is rather simple.

Consider these images stored in two separate files:

The chessboard pattern in the image on the right is only used to indicate transparency here. The white and grayish squares are not an actual part of the image itself. This is the “see-through” area which you would usually see in digital manipulation software.

When the image on the right is placed on top of other HTML elements or images, the checkered area will not block that content underneath. And this is the whole idea behind multiple backgrounds in HTML.

Image Transparency

To fully take advantage of multiple backgrounds one of the background images should have a transparent area. But how do we create one?

In this example, the second image image2.png contains 5 black dots on a transparent background indicated by a checkered pattern.

Finding the Magic Eraser Tool in Photoshop.

Like many other CSS properties that accept multiple values — all you have to do — to set up multiple backgrounds is to provide a set of values to the background property separated by comma:

Specifying Multiple Background Images

To assign multiple (layered) background images to the same HTML element, the following CSS can be used:

body { background: url(‘image2.png’), url(‘image1.png’)

The order in which you supply images to the background’s url property is important. Note that the top-most image is always listed first. This is why we start with image2.png.

This code produces the following result:

Superimposing a transparent image over another one using multiple backgrounds in CSS.

In this example we demonstrated multiple backgrounds in theory on a subjective <div> (or similar) element with square dimensions.

Let’s take a look at another example.

Note here that the puppy.png image will be the first item on the comma-separated list. This is the image we want to superimpose on top of all of the other images on the list.

Combining the two:

body { background: url(‘puppy.png’), url(‘pattern.png’)

We get the following result:

Other background properties that also take comma-separated lists exist. Pretty much every other background related property other than background-color.

In the same way, you can supply other parameters to each individual background, using the other background properties demonstrated below:

background
 background-attachment
 background-clip
 background-image
 background-origin
 background-position
 background-repeat
 background-size

The following property cannot be used with a list for obvious reasons:

background-color

What would it mean to provide multiple color values to a background? Whenever color background property is set, it usually fills the entire area with a solid color. But multiple backgrounds require that at least one of the backgrounds contains transparency of some sorts. Therefore, it cannot be used in the case of multiple backgrounds for any meaningful purpose.

That’s about all you can say about HTML backgrounds.

I am sure I may have missed some non-standard use case or made other mistakes. If you see anything let me know.

My HTML book HTML — Intuitive Guide has more examples.

Congratulations. You now have a handful of ideas about using background images in CSS. You can follow me on GitHub— I follow back!

This article was sponsored by Learning Curve software literature publisher.

Thanks for reading :-)