How to Use Image Backgrounds

Besides pure-color backgrounds, it is also possible to create image-based backgrounds using the background-image property.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

p {
  background-image: url(https://images.unsplash.com/xxx);
}

url() is a CSS function used to load external resources. It works similarly to the src attribute.

It supports local files:

url(/images/image.png)

As well as remote assets:

url(https://images.unsplash.com/photo-1707843745563-d46b8ffb82fe?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDgwNzg4MjZ8&ixlib=rb-4.0.3&q=85)

Customizing image size

Try the above demo in the playground, and you will see that the image is too big for the <p> element.

In this case, you can customize the image size using background-size.

p {
  /* . . . */
  background-image: url(. . .);
  background-size: 100px;
  /* background-size: <width>; */
  /* background-size: <width> <height>; */
}

If you don't know the size of the <div> element and want the browser to decide, use the keywords cover or contain.

p {
  /* . . . */
  background-image: url(. . .);
  background-size: cover;
  /* background-size: contain; */
}

cover will make the image just large enough to cover the entire space of <div>, and contain will make the image just large enough to fit inside <div>.

Repeating the image background

By default, if a single image is not enough to fill the entire background, it will be repeated horizontally and vertically to fill the entire space.

You can turn off this behavior by setting background-repeat to no-repeat.

p {
  /* . . . */
 
  background-image: url(. . .);
  background-size: contain;
 
  background-repeat: no-repeat;
}

Or, in some cases, you might need to enable only horizontal or vertical repeat:

p {
  /* . . . */
 
  background-image: url(. . .);
  background-size: contain;
 
  background-repeat: repeat-x;
  /* background-repeat: repeat-y; */
}

Customizing the repeat direction

Notice that the image repeats with a pattern. It always starts in the top-left corner.

You can again customize this behavior by setting the background-position property, which takes two values, the horizontal position and the vertical position.

div {
  /* . . . */
 
  background-image: url(. . .);
  background-size: 100px;
 
  background-repeat: repeat;
  background-position: bottom right;
}

Gradient backgrounds

Gradients can also be used as the background.

In CSS, gradients are images generated with the functions linear-gradient(), radial-gradient(), or conic-gradient(). And because they are images, you must use the background-image property in this case.

<p class="linear-gradient">
  Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
 
<p class="radial-gradient">
  Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>
 
<p class="conic-gradient">
  Lorem ipsum dolor sit amet consectetur adipisicing elit...
</p>

.linear-gradient {
  background-image: linear-gradient(to right, #10b981, #06b6d4);
}
 
.radial-gradient {
  background-image: radial-gradient(#10b981, #06b6d4);
}
 
.conic-gradient {
  background-image: conic-gradient(#10b981, #06b6d4);
}

The linear-gradient() function is the most commonly used one. It takes three parameters: the direction, the starting color, and the finishing color.

The direction can be either a numeric value in degrees (30deg, 60deg) or a keyword such as to top, to bottom, or to left.

We will talk about gradients later.