CSS Background Properties
When done effectly adding background colours and images to a page can really lift the design. Background colours and images can be added to any HTML element and are commonly added to elements such as <div> and the <body>. Remember when added to the <body> the colour or images are effectively the defaults that backgrounds on other elements will override.
Background images and background colours are controlled through a range of CSS properties. Here are some key properties:
Background Colours
background-color
The property is used to apply a background color to an element. You can use either a color name, hexadecimal value, RGB, RGBA, HSL, or HSLA. While the color property is for the foreground color, background-color is used for background colours.
Example:
This example applies a black background to paragraphs of text and makes the text white.
Background Gradients
As well as block colours linear and radial gradients can be applied. The values for these are quite complex so Gradient Generator Tools are very handy. It is also a good idea to provide a fallback block colour:
The effect of the linear gradient from the above code sample.
Background Images
background-image
The background-image property is used to attach a background image (GIF, JPG, PNG, or SVG). The image will tile by default. This property can be applied to any element, allowing a document to use multiple background images. It accepts the URL (relative or absolute) of the background image.
Example:
Tip : When applying images as backgrounds make sure they are fit for purpose and not so big that they add to page download times or that the image distracts from the core content. Background images are generally created / edited to act as background images.
background-attachment
The background-attachment property controls whether the background image scrolls with the rest of the page. It accepts the values fixed, scroll, and local. The scroll value is the default.
Example:
background-position
The background-position property positions the background image. It accepts two values: the horizontal and the vertical positions, separated by a space. Positions can be specified using units such as percentages, pixels, or keywords like top, center, bottom, left, and right.
Example:
background-repeat
The background-repeat property controls the tiling of the background image. It accepts the values repeat, repeat-x, repeat-y, and no-repeat.
Example:
background-size
The background-size property specifies the size of the background image. It can accept values like auto, cover, contain, or specific sizes in units such as pixels or percentages.
Example:
background-clip
The background-clip property defines how far the background image or color extends within an element. It accepts values like border-box, padding-box, and content-box.
Example:
background-blend-mode
The background-blend-mode property allows you to specify how the background images and background colours should blend. It accepts values like multiply, screen, overlay, darken, lighten, and many others.
Example:
Combining Background Properties
For convenience, you can combine multiple background properties into a single background shorthand property. The order of values should be: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-blend-mode.
Example:
See the Pen CSS Background Demos by Martin Cooper (@mustbebuilt) on CodePen.