CSS Background

The CSS <background> properties allow us to set colors, images, and gradients for element backgrounds. With them, we can create anything from simple frames to complex visual effects.

Background Colors

The simplest background can be set with <background-color>. We can use any color in HEX, RGB, HSL, or by name.

In the following example, a light blue background color is given to a <div> element:

Background Images and Gradients

With <background-image> we can set an image, while with the <background> shorthand we can even define gradients. Image repetition and sizing can also be controlled.

Background Positioning and Sizing

With <background-repeat>, <background-size>, and <background-position> properties, we can precisely define how a background image appears. For example, cover fills the entire element, while contain keeps proportions.

Multiple Background Layers

In CSS we can define multiple background layers at once. For example, we can combine images and gradients in a single background declaration.

Background-attachment

The background-attachment property controls whether the background remains fixed in the viewport (parallax effect) or moves with the content.

Using the Background Shorthand

With the background shorthand property, we can define color, image, position, size, repeat, and attachment values all in one line.

Tips for Using Backgrounds

Background properties can be combined in many creative ways. Some useful tips:

• Use gradients if you want a modern and responsive background solution.
• Optimize large background images so they do not slow down loading.
• Combine multiple background layers with the <background> shorthand to achieve more complex effects.