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
property. If you want to set multiple background properties, such as color, image, position, and size, you can use the background-color
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>
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>
CSS background VS background-color