CSS background Property

February 10, 2021 12:37 pm IST

❮ Prev Next ❯

You are Here:

CSS background Property

CSS background property is a shorthand property of the following CSS properties

Example

HTML Online Editor

Run

Syntax

Using CSS

element{ /* background: background-color background-image background-repeat background-attachment background-position; */ background: lightgreen url("apple.png") no-repeat fixed center; }

Using Javascript

object.style.background="lightgreen url('apple.png') no-repeat fixed center";

Animatable

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

Default Value

Default value for CSS background property is white none 0% 0% auto repeat padding-box border-box scroll.

Property Value

Value	Type	Explanation
background-color	Required	Specifies the background color to be used.
background-image	Optional	Specifies the background image color to be used
background-position	Optional	Specifies the position of the background images.
background-size	Optional	Specifies the size of the background images.
background-repeat	Optional	Specifies how to repeat the background images.
background-origin	Optional	Specifies the position of the background images.
background-clip	Optional	Specifies how to clip the background-image.
background-attachment	Optional	Specifies whether the image's position is fixed within the viewport, or scrolls with its containing block.

Using JavaScript

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

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background: lightgreen url("apple.png") no-repeat fixed center; height: 800px; } </style> </head> <body> <h1>CSS background Property</h1> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("body")[0]; function myFunction(){ x.style.background = "DodgerBlue url('orange.png') no-repeat fixed center"; } </script> </body> </html>

Run