CSS background-size Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-size Property

CSS background-size property sets the size of the element's background image.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: auto; color: #ffffff; } </style> </head> <body> <h1>CSS background-size Property</h1> <p>CSS background-size to auto</p> </body> </html>

Run

Syntax

Using CSS

element{ background-size: cover; }

Using Javascript

object.style.backgroundSize="cover";

Animatable

Yes, background-size property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS background-size property is auto.

Property Value

The following table provides a list of values for CSS background-size property.

Value	Explanation
auto	Sets the background image in the corresponding direction such that its intrinsic proportions are maintained.
length	Sets the width and height of the background image. Negative values are not allowed.
percentage	Sets the width and height of the background image in percentage of the background positioning area. Negative values are not allowed.
cover	Sets the image as large as possible without stretching the image.
contain	Sets the image as large as possible without cropping or stretching the image.

Using Length

In the following example, we will use pixel to adjust the size of the background image.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: 500px 200px; color: #ffffff; } </style> </head> <body> <h1>CSS background-size Property</h1> <p>CSS background-size to length</p> </body> </html>

Run

Using percentage

In the following example, we will use percentage to adjust the size of the background image.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: 100% 150%; color: #ffffff; } </style> </head> <body> <h1>CSS background-size Property</h1> <p>CSS background-size to percentage</p> </body> </html>

Run

Using cover

In the following example, we use background-size:cover to the image as large as possible without stretching the image.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: cover; color: #ffffff; } </style> </head> <body> <h1>CSS background-size Property</h1> <p>CSS background-size to cover</p> </body> </html>

Run

Using contain

In the following example, we use background-size:contain to set the image as large as possible without cropping or stretching the image.

Example

HTML Online Editor

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS background-size property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ height: 260px; background-image: url("ocean.jpg"); background-repeat: no-repeat; background-size: contain; color: #ffffff; } </style> </head> <body> <h1>CSS background-size Property</h1> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("body")[0]; function myFunction(){ x.style.backgroundSize = "cover"; } </script> </body> </html>

Run