CSS background image and color

In CSS, the background property is used very often. It lets you add background colors, images, gradients, and many other visual effects. By using background-image together with background-color, you can create nice-looking sections, banners, hero images, layouts, and full website designs.

Background-color

This is the simplest and most commonly used type of background. The background can be defined using:

• color name (red, gold, black)
• hex (#ff0000)
• rgb/rgba (rgba(0,0,0,0.5))
• hsl (hsl(200, 50%, 50%))

.box {
  background-color: blue;
  background-color: #3498db; /* blue */
  background-color: rgba(52,152,219); /* blue witch 50% opacity */
  background-color: hsl(200, 50%, 50%); /* blue */
}

Background-image

It allows you to set an image as the background of an element. It supports many formats such as JPG, PNG, SVG, WebP, and gradients.

.hero {
  background-image: url("banner.jpg");
}

Overlay (color on top of an image)

This is one of the most popular effects on modern websites. It lets you slightly darken a bright image so that any text placed on it becomes easier to read.

.overlay {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("photo.jpg");
}

Effect:

Modern Remote Work: How to Stay Productive at Your Computer?

Multiple Backgrounds

CSS allows you to set several background images at the same time. The layers are drawn from top to bottom – the first image in the list appears on top.

.multi {
  background-image: 
    url("stars.png"),
    linear-gradient(to bottom, transparent 0%, rgba(255,200,255,0.9) 100%);
    url("work.png"),
}

Effect: