CSS Backgrounds

Nikhil

Published on 2021-07-07 11:55:21

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 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;

atutorialhub

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;
}

atutorialhub background image

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>

Atutorialhub background

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:

Atutorialhub background postions

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

HTML

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 repeat

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 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)";

Intersting? Share it

ATutorialHub Related Guide

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2

Admin

2021-10-28 15:14:42

·

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.
Sea battle game only using HTML and CSS

Admin

2021-09-20 03:43:36

·

sea battle game where using only HTML and CSS and animation in css and html tags sea battle game

Comments (9)

Your email address will not be published. Required fields are marked*

User Comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website

Sax

2021-09-25 19:35:50

Nice website

CSS Backgrounds

CSS Background Color

Hex color codes

CSS Background Gradients

CSS Background Image

Background Shorthand

CSS Background Size

CSS Background Position

The background-origin property

Multiple Background Image

CSS Background Attachment

CSS Background Clip

CSS Background Repeat

background-blend-mode Property

CSS Background Color with Opacity

ATutorialHub Related Guide

Comments (9)

Leave a Comment

User Comments

panduranga gupta

raju

Shivani

Harshitha

Sowmya

Zain Khan

Rudrakshi Bhatt

Pavana Somashekar

Sax

Recently Guide Posted

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2

Sea battle game only using HTML and CSS

Tags

css Tutorial