CSS background vs background-color
In this manual, we will learn the difference between background and background-color properties in detail.
Let’s start!
CSS background Property
To adjust the background of any HTML element, the CSS “background” property is utilized. It is a shorthand property of eight more properties which means you can use all of them in one line. Those other properties are:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Syntax
Here is the syntax of the background property:
Let’s move to the explanation of all of the above-mentioned properties one by one.
CSS background-color Property
Using the “background-color” property, you can set the color of the background. The color will appear behind the HTML elements.
Syntax
The syntax of the background-color property is:
In the place of “color”, you can set the color of the background you want to appear behind the elements.
Example
First, in the HTML file, we will create a container using the <div> tag and then add a heading and paragraph.
HTML
In CSS, we will adjust the height of the div as “100%” to make it appear on the whole page and font-size of the text as “xx-large”. After that, set the background color as “aqua”.
CSS
height: 100%;
font-size: xx-large;
background-color: aqua;
}
In the below-provided image, you can see that the background color is applied:
CSS background-image Property
The “background-image” property is used to set one or more images as a background of the HTML elements. You can utilize this property to add different background images for different elements.
Syntax
The syntax of the background-image property is:
Here, give the path of the image you want to set as a background as an argument to the “url()”.
Example
In continuation of the previous example, add a background image in the “div” class. We will add the url of the image as “url(img.jpg)”:
...
background-image: url(img.jpg);
}
The below-provided output indicates that the background image has been successfully added:
Note that the image is repeated. To solve this issue, check out the next property.
CSS background-repeat Property
When you add an image as a background on a web page, it gets repeated by default. To avoid this repetition and set the pattern according to your choice, the “background-repeat” property is utilized.
Syntax
The syntax of the background-repeat property is:
The description of the stated values of the background-repeat property is given below:
- repeat: It is utilized to repeat the image in both directions, vertical and horizontal.
- repeat-x: It is used to set the repetition of the image only horizontally.
- repeat-y: It specifies the vertical repetition of the image.
- no-repeat: It is used to avoid repetition of the image.
Example
Here, we will set the value of the background-repeat property as “no-repeat”:
...
background-repeat: no-repeat;
}
The outcome of the above-provided code is given below. You can see that the image is not repeated anymore:
CSS background-position Property
To set the position of the background image, the “background-position” property is used. It allows you to adjust the image in different positions such as left top, left center, left bottom, right top, right center, and many more.
Syntax
The syntax of the background-position property is:
In the place of “value”, you can specify the position of the image.
Example
Here, we will set the background-position as “center”:
...
background-position: center;
}
In the output below, the image appears in the center of the page:
CSS background-size Property
In order to set the size of the background image, the “background-size” property is used.
Syntax
Background-size has the following syntax:
Following is the description of the values of the background-size property:
- length: It is used to fix the width and height of the background image.
- cover: It is utilized to adjust the background image in the whole background.
Example
We will set the size of the background as “100%” height and “80%” width:
...
background-size: 100% 80%;
}
You can see that the image has been resized based on the specified dimensions:
CSS background-origin Property
The “background-origin” property is utilized to adjust the positioning area of the background image. The image is adjusted in the upper-left corner as default.
Syntax
The syntax of the background-origin property is:
The values of the background-origin property are described below:
- padding-box: It is the default value of the background-origin property utilized to adjust the position of the background image according to the padding edge.
- border-box: It is used to set the image according to the border-box of the image.
- content-box: It is utilized to set the background image in accordance with the content of the image.
Note: The background-origin property does not work if the value of the background-attachment property is set as “fixed”.
Example
First, create a border around the container. Here, we will continue the previous example and set the padding value as “10px”. After that, adjust the border width as “15px”, style as “ridge”, and color as “rgb(1, 68, 68)”. In the end, we will assign the value of background-origin property as “content-box”:
...
padding: 10px;
border: 15px ridge rgb(1, 68, 68);
background-origin: content-box;
}
The outcome of above-provided code is given below. You can see that the image’s position is set according to the content of the div:
CSS background-clip Property
The “background-clip” property works on the element’s background color. It lets you control how far a background color stretches beyond an element, such as the element’s padding, its border, and its content.
Syntax
The syntax of the background-clip property is:
The values of the background-origin property are described below:
- border-box: It is the default value of the background-origin property used to set the background color behind the border.
- padding-box: It is utilized to adjust the color within the padding box of the element.
- content-box: It is used to set background color according to the content of the element.
Example
We will continue the previous example and change the value of the border style to “dotted” to understand the background-clip property. After that, we will set the value of the background-clip property as “padding-box”:
...
background-clip: padding-box;
}
The output signifies that the white background color is showing up when the border edge ended:
CSS background-attachment Property
The “background-attachment” property is used to adjust the behavior or the image while scrolling the page. Its behavior can be set scrolling with other elements or fixed.
Syntax
The syntax of the background-attachment property is:
You can set the value of background-attachment as “fixed” to fix the background image or “scroll” to allow the image to scroll with the page.
Note: By default, the value of the background-attachment property is set as “scroll”.
It can be seen that the added background image is not static when we have scrolled. Now let’s fix this issue.
To do so, we set the value of the background-attachment property as “fixed”:
...
background-attachment: fixed;
}
Here is the result demonstrating that the image has been fixed:
Now, head toward the comparison between background and background-color properties.
CSS background vs background-color
The given table will differentiate the background and background-color properties on the base of their features:
Features | CSS background | CSS background-color |
Type | It is a super property. | It is a sub-property of background property. |
Functionality | It sets all background properties. | It sets only the background color. |
Range | It supports all background properties | It only supports background-color property |
Level | When you need to add multiple values of background, it is easy to use. You can set the values of all background properties at once. | It can be utilized when you only need to add a single background color. |
Syntax | background: values
(Values are bg-color, bg-image, and other properties) |
background-color: color |
It has been explained how background-color properties differ from background properties.
Conclusion
CSS “background” property is a shorthand property used to set multiple background values at once, such as color, image, position, size, origin, and more. On the other hand, “background-color” is only used to add color to the background. In this guide, we have discussed the difference between CSS background property and CSS background-color property.
Source: linuxhint.com