Difference between background and background-color
- Background Property
The background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Background Color:
Syntax:body { background-color:color name }
A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
- Example:
<
style
>
h1 {
background-color: blue;
}
</
style
>
<
body
>
<
h1
>
Geeksforgeeks
</
h1
>
</
body
>
chevron_rightfilter_none
Output:
Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
Syntax:
body { background-image : link; }
- Example:
<
style
>
body {
background-image: url(gfgpolaroidimagefunction.png);
}
</
style
>
<
body
>
<
h1
>
Geeksforgeeks
</
h1
>
</
body
>
chevron_rightfilter_none
Output:
- Background-color Property:
The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it’s valued as an image URL or as a color code or specify the value of each background property in the below-given order.Syntax:
element { background-color property }
Example:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>background-color property</
title
>
<
style
>
body {
text-align:center;
background-color:green;
}
h1 {
color:white;
background-color:blue;
}
h2 {
color:white;
background-color:black;
}
</
style
>
</
head
>
<
body
>
<
h1
>Geeksforgeeks </
h1
>
<
h2
>background-color: color_name;</
h2
>
</
body
>
</
html
>
chevron_rightfilter_noneOutput: