CSS background-size Property

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

Demo:

Syntax:

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.

Example:

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

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 2px solid black;
  padding: 35px;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/07/desklamp.gif);
  background-repeat: no-repeat;
  background-size: cover;
  width: 580px;
  color: white;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Hello World

Some text…

Enjoy coding!

Hello World

Share this: