# Backgrounds
With CSS you can set colors, gradients, and images as the background of an element.
It is possible to specify various combinations of images, colors, and gradients, and adjust the size, positioning, and repetition (among others) of these.
# Background Color
The background-color property sets the background color of an element using a color value or through keywords, such as transparent , inherit or initial .
This can be applied to all elements, and ::first-letter / ::first-line pseudo-elements
Colors in CSS can be specified by different methods
# Color names
CSS
HTML
- The example used above is one of several ways that CSS has to represent a single color.
# Hex color codes
Hex code is used to denote RGB components of a color in base-16 hexadecimal notation. #ff0000, for example, is bright red, where the red component of the color is 256 bits (ff) and the corresponding green and blue portions of the color is 0 (00).
If both values in each of the three RGB pairings (R, G, and B) are the same, then the color code can be shortened into three characters (the first digit of each pairing). #ff0000 can be shortened to #f00 , and #ffffff can be shortened to #fff .
Hex notation is case-insensitive.
# RGB / RGBa
Another way to declare a color is to use RGB or RGBa.
RGB stands for Red, Green and Blue, and requires of three separate values between 0 and 255, put between brackets, that correspond with the decimal color values for respectively red, green and blue.
RGBa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.
# HSL / HSLa
Another way to declare a color is to use HSL or HSLa and is similar to RGB and RGBa.
HSL stands for hue, saturation, and lightness, and is also often called HLS:
- Hue is a degree on the color wheel (from 0 to 360).
- Saturation is a percentage between 0% and 100%.
- Lightness is also a percentage between 0% and 100%.
HSLa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.
# Interaction with background-image
The following statements are all equivalent:
They will all lead to the red color being shown underneath the image, where the parts of the image are transparent, or the image is not showing (perhaps as a result of background-repeat ).
Note that the following is not equivalent:
Here, the value of background overrides your background-image .
For more info on the background property, see Background Shorthand
# Background Gradients
Gradients are new image types, added in CSS3. As an image, gradients are set with the background-image
(opens new window) property, or the background shorthand.
There are two types of gradient functions, linear and radial. Each type has a non-repeating variant and a repeating variant:
- linear-gradient()
- repeating-linear-gradient()
- radial-gradient()
- repeating-radial-gradient()
# linear-gradient()
A linear-gradient has the following syntax
| Value | Meaning |
|---|---|
| <direction> | Could be an argument like to top , to bottom , to right or to left ; or an angle |
(opens new window) as 0deg , 90deg . . The angle starts from to top and rotates clockwise. Can be specified in deg
For example, this creates a linear gradient that starts from the right and transitions from red to blue
You can create a diagonal gradient by declaring both a horizontal and vertical starting position.
It is possible to specify any number of color stops in a gradient by separating them with commas. The following examples will create a gradient with 8 color stops
# radial-gradient()
| Value | Meaning |
|---|---|
| circle | Shape of gradient. Values are circle or ellipse , default is ellipse . |
| farthest-corner | Keywords describing how big the ending shape must be. Values are closest-side , farthest-side , closest-corner , farthest-corner |
| top left | Sets the position of the gradient center, in the same way as background-position . |
# Repeating gradients
Repeating gradient functions take the same arguments as the above examples, but tile the gradient across the background of the element.
| Value | Meaning |
|---|---|
| -45deg | Angle unit |
(opens new window) . The angle starts from to top and rotates clockwise. Can be specified in deg
Note that HEX, RGB, RGBa, HSL, and HSLa color codes may be used instead of color names. Color names were used for the sake of illustration. Also note that the radial-gradient syntax is much more complex than linear-gradient, and a simplified version is shown here. For a full explanation and specs, see the MDN Docs
# Background Image
The background-image property is used to specify a background image to be applied to all matched elements. By default, this image is tiled to cover the entire element, excluding margin.
To use multiple images as background-image , define comma separated url()
The images will stack according to their order with the first declared image on top of the others and so on.
| Value | Result |
|---|---|
| url(‘/path/to/image.jpg’) | Specify background image’s path(s) or an image resource specified with data URI schema (apostrophes can be omitted), separate multiples by comma |
| none | No background image |
| initial | Default value |
| inherit | Inherit parent’s value |
More CSS for Background Image
This following attributes are very useful and almost essential too.
# Background Shorthand
The background property can be used to set one or more background related properties:
| Value | Description | CSS Ver. |
|---|---|---|
| background-image | Background image to use | 1+ |
| background-color | Background color to apply | 1+ |
| background-position | Background image’s position | 1+ |
| background-size | Background image’s size | 3+ |
| background-repeat | How to repeat background image | 1+ |
| background-origin | How the background is positioned (ignored when background-attachment is fixed ) | 3+ |
| background-clip | How the background is painted relative to the content-box , border-box , or the padding-box | 3+ |
| background-attachment | How the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport | 1+ |
| initial | Sets the property to value to default | 3+ |
| inherit | Inherits property value from parent | 2+ |
The order of the values does not matter and every value is optional
# Syntax
The syntax of the background shorthand declaration is:
# Examples
Simply setting a background-color with the red value.
Setting a background-clip to border-box and a background-color to red.
Sets a background-repeat to no-repeat, background-origin to center and a background-image to an image.
In this example, the background-color of the element would be set to green with pattern.png , if it is available, overlayed on the colour, repeating as often as necessary to fill the element. If pattern.png includes any transparency then the green colour will be visible behind it.
In this example we have a black background with an image ‘picture.png’ on top, the image does not repeat in either axis and is positioned in the top left corner. The / after the position is to be able to include the size of the background image which in this case is set as 600px width and auto for the height. This example could work well with a feature image that can fade into a solid colour.
NOTE: Use of the shorthand background property resets all previously set background property values, even if a value is not given. If you wish only to modify a background property value previously set, use a longhand property instead.
# Background Size
# General overview
(opens new window) property enables one to control the scaling of the background-image . It takes up to two values, which determine the scale/size of the resulting image in vertical and and horizontal direction. If the property is missing, its deemed auto in both width and height .
auto will keep the image’s aspect ratio, if it can be determined. The height is optional and can be considered auto . Therefore, on a 256 px × 256 px image, all the following background-size settings would yield an image with height and width of 50 px:
So if we started with the following picture (which has the mentioned size of 256 px × 256 px),
we’ll end up with a 50 px × 50 px on the user’s screen, contained in the background of our element:
One can also use percentage values to scale the image with respect of the element. The following example would yield a 200 px × 133 px drawn image:
The behaviour depends on the background-origin
# Keeping the aspect ratio
The last example in the previos section lost its original aspect ratio. The circle got into an ellipse, the square into a rectangle, the triangle into another triangle.
The length or percentage approach isn’t flexible enough to keep the aspect ratio at all times. auto doesn’t help, since you might not know which dimension of your element will be larger. However, to cover certain areas with an image (and correct aspect ratio) completely or to contain an image with correct aspect ratio completely in a background area, the values, contain and cover provide the additional functionality.
# Eggsplanation for contain and cover
Sorry for the bad pun, but we’re going to use a picture of the day by Biswarup Ganguly
(opens new window) for demonstration. Lets say that this is your screen, and the gray area is outside of your visible screen. For demonstration, We’re going to assume a 16 × 9 ratio.
We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4×3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover . Note that I also assume that we didn’t mangle the width and/or height of body .
# contain
Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:
# cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
This makes sure that the background image is covering everything. There will be no visible background-color , however depending on the screen’s ratio a great part of your image could be cut off:
Using Background vs. Background-Color in CSS, does it matter? (Yes)
One of the most common CSS questions I get is what’s the difference between background and background-color in CSS? The reason it’s confusing is that you often see developers using background-color and background interchangeably when they apply background color to an element.
But they’re not the same. The background (without -color) property can be used to set all the background properties for an element in one declaration. For example, you might want to add both a background color, an image that is displayed once (no-repeat), and an image position to an element in one single declaration, like this:
The above could also be written as such:
So the background property can be used as a convenient short-hand that can apply multiple declarations in one line, and save you many lines of code.
Declaration = CSS property + value.
The background-color property, on the other hand, can only set the background color of an element. It’s like a subset (a part) of the bigger background property.
Important: the background property will reset all previous declarations — be careful!
If you’ve previously applied various background declarations on an element, e.g. background-color or background-image , and then later on add a background: red declaration to the same element, all your previous declarations will be reset, and now your element’s background is red, and your background image is gone.
Take a look at this Pen example, where we have three div elements with the same .box class. The first element only has the .box class but the others also have a utility (helper) class of .bg-red and .bg-blue respectively.
Notice a difference?
The second box is all red, there’s no image, even though its .box class clearly specifies that it should have the same JS image as the two other elements.
Take a close look at the CSS, and compare the .bg-red and .bg-blue properties. The red class uses the ‘master’ (all-in-one) background property to set the red color value, whereas the blue class uses the single-purpose background-color .
The background property on the .bg-red class simply removes every other background declaration on the second div element: here -image , -repeat , -color and then adds the specified red value as the single background attribute for that element.
So, if you only want to affect the background colors of specific elements, make sure you use background-color , not background or you will overwrite any previous background- declarations on that element.
Sometimes, resetting all previous declarations may be exactly what you want to do. You could be working on a website that has a bunch of legacy code that you’re not allowed to touch (or want to haha) but you want to manipulate a specific element that already has a bunch of declarations that you need to replace with a new singular declaration value, e.g. color — for that, using background is an excellent tool.
Has this been helpful to you?
You can support my work by sharing this article with others, or perhaps buy me a cup of coffee ��
CSS background vs background-color
In this manual, we will learn the difference between background and background-color properties in detail.
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:
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
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”:
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”:
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”:
border : 15px ridge rgb ( 1 , 68 , 68 ) ;
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”:
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”:
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:
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.
About the author
Sharqa Hameed
I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.
CSS background vs background-color
One of the most commonly asked questions in CSS is what’s the actual difference between background and background-color? Are these both properties the same or different?
The reason why most of the developers get confused is that both the properties can set the background color of an element. I mean if we use background: red; or background-color: red; both of these set the background color of an element to red. So, are these two the same or different?
Here is the answer to all of these questions.
The background is shorthand for several background properties like background-position, background-size, background-image, background-color, etc. While the background-color is an individual property that only sets the background color of an element.
The background is shorthand of the following 8 properties:
If you omit any of the 8 properties’ values, the background property uses its default value.
This means when you set background: red; , you are actually setting background: red none 0% 0% auto repeat padding-box border-box scroll; . But other values remain ineffective because the background-image is set to none .
Therefore, the background: red; only sets the background color of an element to red.
So, either we set background: red; or background-color: red; , both do exactly the same tasks but both are different. One is a shorthand while another is an individual property that only and only sets the background color of the element.
Here is a working example:
Example:
background vs background-color which one should be preferred?
Now, As we have understood the actual difference between the background and background-color property. So, which one should we preffer to set the background color of an element?
Now you might say that we can use either of the two. No, you shouldn’t.
If you only want to set the background color of the element always prefer the background-color property, not the background.
This is because if you have previously set any background image on the element and you mistakenly use background to set the background color of the element, it will reset all the existing background properties.
Here is a working example which shows the exact difference:
Example:
In the above example, only the first paragraph will have a background image. No background image will be applicable on the second paragraph because the background: red; property will reset all the previously declared background properties to their default value.
Where can you prefer background over background-color?
Sometimes, you might want to reset all previously declared background properties. For example, an old website which has poor styling.
In such situations, instead of resetting each of the background properties individually, you could use the background property as a tool to give a fresh background to the element.