Backgrounds

On this page

Bit more work to be done on this page but useful stuff already.

Background colour

This is by far the simplest to understand.

div {
    background-color: #111;
}

The color value has a bunch of different possible values like the name, red, hex #ff0011, hex abbreviated #ff0, hex with alpha #f89dc055, rgb, rgba, hsl, hsla and more to follow in the near future.

Generally this works on it’s own. Properties like background-size, background-attachment, background-position etc. have no meaning.

background-clip

However one other property does work with background-color and that is background-clip. The default value is border-box which mean the background colour goes out to the outer edge of the border like so.

The background-origin sets where a background begins which is top left of either the border-box, padding-box or content-box of the containing element.

test here

Here it’s set to background-clip: padding-box

In this context it’s not much use unless you have a non-solid border (dashed, dotted or double)

The other background properties relate to background images including the size, position, whether they scroll or not, and how they repeat.

Full list

background:                                   /* general shorthand */
background-color: rgba(255, 255, 128, .5);    /* sets the colour */
background-image: url(images/hearts.png);     /* can also be used with gradients */
background-repeat: repeat-x;                  /* repeat, no-repeat, repeat-y */
background-attachment: local;                 /* fixed, scroll */
background-position: left center;              /* -200px 100px; */
background-size: cover;                       /* contain, 50%, 215px 115px, auto (default) */
background-repeat: round;                     /* sizes a repeating background image so it fits perfectly with it's container */
background-clip: padding-box;                 /* border-box, content-box, text */
background-origin: border-box;                /* padding-box, content-box, text */

background-image

Back in the day background images were typically small in size (and thus kb too) and repeated across the screen. A simple one line declaration with a path to the image was all that was required.

div {
    background-image: url(/images/big-dot.png);
}

If you want to fit the image perfectly we now have background-repeat: round

NB. The default for background-position is repeat. It can also take no-repeat which means there is only one copy of your background image or repeat-X and repeat-Y which repeats the image across either the x axis (horizontal) or y axis (vertical) respectively.

If the above image is looking a bit too perfect we can offset the background using background-position

div {
    background-image: url(/images/diamond.png);
    background-repeat: round;
    background-position: -25px -25px;
}

You can also use background-repeat: space which spaces out the images so that none are clipped rather than stretching them to fit.

Multiple background images

You can have multiple background images to an element but the syntax needs paying attention to, not least because there are several ways of writing it and several more ways to get it wrong.

First remember that if you write property twice in a CSS declaration the second will nullify the first. Thus in this example the first line won’t do anything:

div {
    background-image: url(/images/square.png);
    background-image: url(/images/circle.png);
}

So the images must be in one single property:

div {
    background-image: url(/images/square.png), url(/images/circle.png);
}

For readability it’s good to have them on several lines:

div {
    background-image: 
      url(/images/square.png), 
      url(/images/circle.png);
}

It’s important to not that the first image in the list will be on the top of the subsequent images if they’re overlapping. Here the small circle is placed first:

div {
    background-image:
    radial-gradient(circle at center bottom, goldenrod 0 40px, transparent 40px),
    repeating-conic-gradient(at center bottom, goldenrod 0 10deg, tomato 10deg 15deg);
}

If you want to target each image with other properties keep the order they were listed in the same:

div {
    background-repeat: 
      repeat-x, /* affects the first image in the background-image list */
      no-repeat; /* affects the second image... */
}

You can also use the shorthand background property for multiple background images and properties.

div {
    background: 
      url(boy.jpg) no-repeat center top fixed, 
      url(pattern.jpg) repeat fixed, 
}

image-set()

Similar to HTML’s srcset attribute there is now image-set for background images in CSS. This allows you to use different image resolutions for high or low res devices or create a stack of images to be selected preferentially (below). The first one that’s available to the browser is used.

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

  background-image:image-set(
    "testImage.avif" type("image/avif"),
    "testImage.webp" type("image/webp")
  );
}

In the above code block the first line, a regular CSS background image declaration, is a fallback for browsers that don’t support image-set.

See MDN for more info on image-set(). At the time of writing (Jan 2022) Firefox is the only browser with full support: see caniuse for details.