The background-image property css

The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element.

There are two different types of images you can include with CSS: regular images and gradients.

Images

Using an image on a background is pretty simple:

element {
    background: url(sweettexture.jpg);
  }

The url() value allows you to provide a file path to any image, and it will show up as the background for that element.

Gradients

Another option when using backgrounds is to tell the browser to create a gradient. Here’s a super-duper simple example of a linear gradient:

element {
  background: linear-gradient(black, white);
}

You can also use radial gradients:

element {
  background: radial-gradient(circle, black, white);
}