CSS 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.
CSS 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.
- transparent specifies that the background color should be transparent. This is the default.
- inherit, inherits this property from its parent element.
- initial set this property to its default value.
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
div {
background-color: red; /* red */
}
HTML
<div>This will have a red background</div>
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.
body
{
background-color: #de1205;
/* red */
}
.main
{
background-color: #00f;
/* blue */
}
RGB / RGBa
Another way to declare a color is to use RGB or RGBa. RGB stands for Red, Green, and Blue, and requires 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
header {
background-color: rgb(0, 0, 0); /* black */
}
footer {
background-color: rgba(0, 0, 0, 0.5); /* black with 50% 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.
li a {
background-color: hsl(120, 100%, 50%); /* green */
}
#p1 {
background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}
Interaction with background-image
The following statements are all equivalent:
body
{
background: red;
background-image: url(partiallytransparentimage.png);
}
body
{
background-color: red;
background-image: url(partiallytransparentimage.png);
}
body
{
background-image: url(partiallytransparentimage.png);
background-color: red;
}
body
{
background: red url(partiallytransparentimage.png);
}
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:
body {
background-image: url(partiallytransparentimage.png);
background: red;
}
Here, the value of background overrides your background-image. For more info on the background property, see Background Shorthand.
CSS Background Gradients
Gradients are new image types, added in CSS3. As an image, gradients are set with the background-image 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
background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);
<direction>
Could be an argument like to top, to bottom, to right or to left; or an angle as 0deg, 90deg... . The angle starts from to top and rotates clockwise. Can be specified in deg, grad, rad, or turn. If omitted, the gradient flows from top to bottom
<color-stop-list>
List of colors, optionally followed each one by a percentage or length to display it at. For example, yellow 10%, rgba(0,0,0,.5) 40px, #fff 100%...
For example, this creates a linear gradient that starts from the right and transitions from red to blue
.linear-gradient {
background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}
You can create a diagonal gradient by declaring both a horizontal and vertical starting position.
.diagonal-linear-gradient {
background: linear-gradient(to left top, red, yellow 10%);}
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
.linear-gradient-rainbow {
background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}
radial-gradient()
.radial-gradient-simple {
background: radial-gradient(red, blue);
}
.radial-gradient {
background: radial-gradient(circle farthest-corner at top left, red, blue);
}
- circle - Shape of the gradient. Values are circle or ellipse, default is an 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.
.bullseye {
background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}
- -45deg - Angle unit. The angle starts from to top and rotates clockwise. Can be specified in deg, grad, rad, or turn.
- to left - Direction of gradient, default is to bottom. Syntax: to [y-axis(top OR bottom)] [x-axis(left OR right)] ie to top right
- yellow - 10% Color, optionally followed by a percentage or length to display it at. Repeated two or more times.
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.
CSS 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.
.myClass {
background-image: url('/path/to/image.jpg');
}
To use multiple images as background-image, define comma separated url()
.myClass {
background-image: url('/path/to/image.jpg'),
url('/path/to/image2.jpg');
}
The images will stack according to their order with the first declared image on top of the others and so on.
- 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-size: xpx ypx | x% y%;
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;
Background Shorthand
The background property can be used to set one or more background related properties:
- 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:
background: [<background-image>] [<background-color>] [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>][<initial|inherit>];
Examples
background: red;
Simply setting a background-color with the red value.
background: border-box red;
Setting a background-clip to border-box and a background-color to red.
background: no-repeat center url("somepng.jpg");
Sets a background-repeat to no-repeat, background-origin to center, and a background-image to an image.
background: url('pattern.png') green;
In this example, the background-color of the element would be set to green with pattern.png, if it is available, overlayed on the color, repeating as often as necessary to fill the element. If pattern.png includes any transparency then the green color will be visible behind it.
background: #000000 url("picture.png") top left / 600px auto no-repeat;
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 featured image that can fade into a solid color.
CSS Background Size
General overview
The background-size 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 the vertical and horizontal directions. If the property is missing, it's deemed auto in both width and height.the 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:
background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;
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:
#withbackground {
background-image: url(to/some/background.png);
background-size: 100% 66%;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
Keeping the aspect ratio
The last example in the previous 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 the correct aspect ratio completely in a background area, the values, contain and cover provide the additional functionality.
Eggsplanation for containing and cover
Sorry for the bad pun, but we're going to use a picture of the day by Biswarup Ganguly for the demonstration. Let's 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 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on containing and cover. Note that I also assume that we didn't mangle the width and/or height of the body.
Demonstration with actual code
CSS
div>div
{
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain
{
background-size: contain;
}
div.cover
{
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div>div
{
margin: 0 1ex 1ex 0;
float: left;
}
div+div
{
clear: both;
border-top: 1px dashed silver;
padding-top: 1ex;
}
div>div::after
{
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
HTML
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully
<em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part
of the sky. You don't see the complete image anymore, but neither do you see any background color;
the image <em>covers</em> all of the <code><div></code>.</p>
</div>
CSS Background Position
The background-position property is used to specify the starting position for a background image or gradient
.myClass {
background-image: url('path/to/image.jpg');
background-position: 50% 50%;
}
The position is set using an X and Y co-ordinate and be set using any of the units used within CSS.
- value% value% - A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image) The size of the image is the size given by background size.
- valuepx valuepx - Offsets background image by a length given in pixels relative to the top left of the background positioning area
Units in CSS can be specified by different methods (see here).
Longhand Background Position Properties
In addition to the shorthand property above, one can also use the longhand background properties backgroundposition- x and background-position-y. These allow you to control the x or y positions separately.
The background-origin property
The background-origin property specifies where the background image is positioned.
Note: If the background-attachment property is set to fixed, this property has no effect.
Default value: padding-box
Possible values:
- padding-box - The position is relative to the padding box
- border-box - The position is relative to the border box
- content-box - The position is relative to the content box
- initial
- inherit
CSS
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
HTML
<p>No background-origin (padding-box is default):</p>
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
Output:
Multiple Background Image
In CSS3, we can stack multiple background in the same element.
#mydiv {
background-image: url(img_1.png), /* top image */
url(img_2.png), /* middle image */
url(img_3.png); /* bottom image */
background-position: right bottom,
left top,
right top;
background-repeat: no-repeat,
repeat,
no-repeat;
}
Images will be stacked atop one another with the first background on top and the last background in the back. img_1 will be on top, the img_2 and img_3 is on the bottom.
We can also use background shorthand property for this:
#mydiv {
background: url(img_1.png) right bottom no-repeat,
url(img_2.png) left top repeat,
url(img_3.png) right top no-repeat;
}
We can also stack images and gradients:
#mydiv {
background: url(image.png) right bottom no-repeat,
linear-gradient(to bottom, #fff 0%,#000 100%);
}
CSS Background Attachment
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
body {
background-image: url('img.jpg');
background-attachment: fixed;
}
- scroll - The background scrolls along with the element. This is default.
- fixed - The background is fixed with regard to the viewport.
- local - The background scrolls along with the element's contents.
- initial - Sets this property to its default value.
- inherit - Inherits this property from its parent element.
Examples
background-attachment: scroll
The default behaviour, when the body is scrolled the background scrolls with it:
body {
background-image: url('image.jpg');
background-attachment: scroll;
}
background-attachment: fixed
The background image will be fixed and will not move when the body is scrolled:
body {
background-image: url('image.jpg');
background-attachment: fixed;
}
background-attachment: local
The background image of the div will scroll when the contents of the div is scrolled.
div{background-image: url('image.jpg');
background-attachment: local;
}
CSS Background Clip
Definition and Usage: The background-clip property specifies the painting area of the background.
Default value: border-box
Values
- border-box is the default value. This allows the background to extend all the way to the outside edge of the element's border.
- padding-box clips the background at the outside edge of the element's padding and does not let it extend into the border;
- content-box clips the background at the edge of the content box.
- inherit applies the setting of the parent to the selected element.
CSS
.example {
width: 300px;
border: 20px solid black;
padding: 50px;
background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
background-repeat: no-repeat;
}
.example1 {}
.example2 { background-origin: border-box; }
.example3 { background-origin: content-box; }
HTML
<p>No background-origin (padding-box is default):</p>
<div class="example example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: border-box:</p>
<div class="example example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
<p>background-origin: content-box:</p>
<div class="example example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
CSS Background Repeat
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
div {
background-image: url("img.jpg");
background-repeat: repeat-y;
}
Here's how a background-repeat: repeat-y looks like:
background-blend-mode Property
.my-div {
width: 300px;
height: 200px;
background-size: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(to right, black 0%,white 100%),
url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
background-blend-mode:saturation;
}
HTML
<div class="my-div">Lorem ipsum</div>
CSS Syntax: background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;
CSS Background Color with Opacity
If you set opacity on an element it will affect all its child elements. To set an opacity just on the background of an element you will have to use RGBA colors. Following example will have a black background with 0.6 opacity.
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,
endColorstr=#99000000)";
ATutorialHub Related Guide
Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment