Web development

CSS background-size Property

CSS background-size Property

The CSS background-size property defines the size of the background images.



background-size: auto|length|cover|contain;

auto (default) – the background image is displayed in its original size.

length – Settles the width and height of the background image. The first value sets the width, the second value sets the height.

cover – resize the background image to cover the entire container.

contain – resize the background image to make sure the image is fully visible.


Define the size of a background image with “cover”:

<!DOCTYPE html>
#example1 {
  border: 2px solid black;
  padding: 35px;
  background-image: url(;
  background-repeat: no-repeat;
  background-size: cover;
  width: 580px;
  color: white;

<div id="example1">
  <h4>Hello World</h4>
  <p>Some text...</p>



Hello World

Some text…

Enjoy coding!

Read also:

CSS background-attachment Property

CSS background-blend-mode Property