Revisiting the CSS Background Property

Learn CSS: The Complete Guide

We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.

In this tutorial we’re going to look into one of the older, more familiar CSS properties: background. background is one of several CSS properties whose features are often overlooked. In fact, it saw an upgrade with CSS3, receiving new capabilities beyond just adding a background image or color. Let’s look into some of them!

1. Background Position Offset

Positioning a background graphic is straightforward and something you’re likely familiar with already. If we want to position the background to the bottom right of the element, we apply bottom right to background-position. For example:

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background-color: #525d62;
	background-image: url(images/macbook.png);
	background-repeat: no-repeat;
	background-position: right bottom;
}

Or, with the shorthand, background, after the url definition:

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background: #525d62 url(images/macbook.png) no-repeat right bottom;
}

Since the advent of CSS3 we’ve been able to specify the position offset; the precise distances to the positions set. Taking our example of bottom right, we include bottom 20px right 30px to position our background at 20px from the bottom and 30px from the left.

#workspace {
    width: 100%;
	max-width: 668px;
	height: 400px;
	background-color: #525d62;
	background-image: url(images/macbook.png);
	background-repeat: no-repeat;
	background-position: right 30px bottom 20px;
}

The positions (bottom, top, right, left) can be defined in any order, but the offset length must be defined after each background position.

Credit goes to Metin Kazan for the illustrations.

2. Multiple Background Images

The background property also allows us to add multiple background images. Therefore, let's extend our previous example with more stuff and gadgets.

We add these images to a single background or background-image declaration by separating each one with a comma. We use the background-position property, which also accepts multiple values, to control each of those background images.

#workspace {
	height: 400px;
	background-color: #525d62;
	background-image: 
        url(images/macbook.png),
		url(images/mouse.png),
		url(images/hdd.png),
		url(images/phone.png),
		url(images/ipad.png),
		url(images/coffee.png),
		url(images/camera.png);
	background-repeat: no-repeat;
	background-position: 
            50% 50%,   /* macbook.png */
            75% 295px, /* mouse.png */
            75% 230px, /* hdd.png */
            96% 240px, /* phone.png */
            20% 250px, /* ipad.png */
            22% 190px, /* coffee.png */
            7% 280px; /* camera.png */
}

We can use fixed units (such as pixels), flexible units (such as percentages), or a combination of the two.

Each pair of values represents coordinates from the top left of the container element, to the top left of the image. For example, the top left of the camera image is 280px from the top of the container, then 7% of the available width across from the left.

Note: The available width is the total width of the container element, minus the width of the background image. Therefore a background image positioned 50% along the x axis appears exactly centered!

Motion

Furthermore, since the background-position is an animatable property, we can create a more lively, compelling background:

1	#workspace {
2	width: 600px;
3	height: 400px;
4	background-color: #525d62;
5	background-repeat: no-repeat;
6	background-image:
7	url(images/macbook.png),
8	url(images/mouse.png),
9	url(images/hdd.png),
10	url(images/phone.png),
11	url(images/ipad.png),
12	url(images/coffee.png),
13	url(images/camera.png);
14	background-position:
15	50% 50%,
16	430px 295px,
17	425px 230px,
18	480px 240px,
19	105px 250px,
20	120px 190px,
21	40px 280px;
22	animation: 3s ease 0s inView forwards;
23	}
24	@keyframes inView {
25	0% {
26	background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px;
27	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
28	}
29	20% {
30	background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px;
31	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
32	}
33	30% {
34	background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px;
35	background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%;
36	}
37	40% {
38	background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px;
39	background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%;
40	}
41	50% {
42	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
43	background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%;
44	}
45	60% {
46	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
47	background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%;
48	}
49	100% {
50	background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
51	}
52	}

Here we’ve setup a number of keyframes along a timeline. At each keyframe we’ve altered the background-position-x and background-position-y of each background image. The animation is admittedly rudimentary, so please kindly fork the CodePen and improve it!

Note: Click Rerun at the bottom right of the pen to see the animation

Learn More About CSS Animation

A Couple of Noteworthy Points

The backgrounds we used are ordered sequentially; the very first listed appears at the top of the stack, while the last one listed will appear at the bottom of the background stack.

#workspace {
    width: 600px;
    height: 400px;
	background-color: #525d62;
	background-image: 
        url(images/macbook.png),
		url(images/mouse.png),
		url(images/hdd.png),
		url(images/phone.png),
		url(images/ipad.png),
		url(images/coffee.png),
		url(images/camera.png); /* stacked at the bottom */
	background-repeat: no-repeat;
}

All background sub-properties (background-repeat, background-size, background-position etc.) may be defined multiple times, except background-color. If we apply multiple backgrounds using the shorthand background property, define the background color as the latest value to take effect. For example:

#workspace {
	height: 400px;
	background: 
        url(images/macbook.png) 50% 50% no-repeat,
		url(images/mouse.png) 430px 295px no-repeat,
		url(images/camera.png) 425px 230px no-repeat #525d62;
}

Alternatively, add a separate background-color, subsequent to the short-hand property:

#workspace {
    width: 600px;
    height: 400px;
	background: 
        url(images/macbook.png) 50% 50% no-repeat,
		url(images/mouse.png) 430px 295px no-repeat,
		url(images/camera.png) 425px 230px no-repeat;
    background-color: #525d62;
}

Both of these codes do the same, but I find the latter to be more intuitive and readable.

3. Blend Background Image

The background-blend-mode does the same as you’ll find in graphics applications like Photoshop or Gimp; it blends background images to one another, as well as to whatever’s underneath.

The background-blend-mode takes familiar values such as overlay and multiply among a few others which Jonathan Cutrell does a fantastic job of explaining in his tutorial on the subject. I highly recommend you to read it through so we can jump into some practical examples.

Blending Modes in CSS: Color Theory and Practical Application

Jonathan Cutrell

07 Dec 2015

There are several ways of using CSS Blend Mode to create striking designs, such as blending a gradient with an image, which Ian Yates points out in his inspiration roundup:

Good Golly, Gradients All Over the Web

Ian Yates

20 Jan 2016

To create this effect, we add a background image and a gradient, and apply the overlay blend mode.

#blend {
	background-repeat: no-repeat;
	background-image: url( 'img/people-15.jpg' ),
					  linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
	background-blend-mode: overlay;
}

The overlay impacts both of the backgrounds listed here, so you might need to be cautious if you don’t want everything to blend all together. If we want to avoid everything blending with the background color, set the second value to normal which will apply to our second background image.

#blend {
	background-repeat: no-repeat;
	background-image: url( '../img/people-15.jpg' ),
					  linear-gradient(135deg, rgba(175,0,79,1) 0%,rgba(255,114,187,1) 100%);
	background-color: yellow;
    background-blend-mode: overlay, normal;
}

4. Background Clipping

The background-clip property is a utility which controls how the background color and the image span within the CSS content box model. Similar to the box-sizing property, the background-clip property takes three valid values, namely:

border-box is the default value which spans the background image or color all the way to the outer edge of the element.
padding-box will span the background up to the outer edge of the padding, or in other words; the inner edge of the border.
content-box will preserve the background within the element content as shown below:

One practical example where I’ve found background-clip to be handy is when I have to create a button with an icon, using a single element. In the following demo, our image spans from the left to right edge of the element, even if we add padding on each side, since it still applies border-box.

If we want to surround the icon with a bit of whitespace we would traditionally have to wrap it with another element and apply padding on that extra element. Using the background-clip property, we are able to do it elegantly by setting it to content-box, and substitute the padding with borders of the same color as the background color.

Wrapping Up

The background property is one we frequently use in our projects. Hopefully this article has reminded you of its wide and varied uses, and I look forward to hearing more ideas in the comments.

One final note: browser support for these properties (with the exception of background-blend-mode) are great. According to CanIUse, multiple backgrounds is supported from Internet Explorer 9 onwards, with just a couple of trivial issues. Background image options, such as the background-clip property, is almost as good.

Blending Modes, at the time of writing, work best in Chrome, Opera, are partially applicable in Safari due to a few bugs, but sadly seem to have made no sign of progress with Microsoft Edge.