CSS background vs background-color

Both background and background-color are CSS properties, that are used to modify the background of an element.

background is the shorthand property used to setup the background of an element. Which includes, background-color, background-image, background-repeat, background-position and background-size. For Example:

background: #f0f0f0 url(image.jpg) no-repeat center center;

On the other hand, background-color is a specific property used to set the background color of an element. It ignores any background image and sets the solid background color of an element. For Example:

background-color:#00ff00;

In short, if you just want to set the background color of an element, you can use the background-color property. If you want to set multiple background properties, such as color, image, position, and size, you can use the background shorthand property.

To understand it more clearly let’s write a code were we first set background-color of an element and then set the background of an element.

Setup the background-color of an element

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:lightblue;
}
</style>
</head>
<body>
<h1>This page has lightblue background color</h1>
</body>
</html>

Copy the Code and Run it Here

Setup the background of an element

<html>
<head>
<style>
body {
  background:#ffffff url("https://crus4.com/wp-content/uploads/2022/11/background.jpg") 
  no-repeat center center;
}
</style>
<body>
<h1>Here we have used the background property
</body>
</html>

Copy the Code and Run it Here

Previous

Next

CSS background vs background-color