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

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

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

<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

You can create a diagonal gradient by declaring both a horizontal and vertical starting position.

radial-gradient()

• 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.

• -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.

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.

• 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:

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

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:

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

HTML

CSS Background Position

The background-position property is used to specify the starting position for a background image or gradient

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

HTML

Output:

Multiple Background Image

In CSS3, we can stack multiple background in the same element.

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:

We can also stack images and gradients:

CSS Background Attachment

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

• 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:

background-attachment: fixed

The background image will be fixed and will not move when the body is scrolled:

background-attachment: local

The background image of the div will scroll when the contents of the div is scrolled.

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.

Here's how a background-repeat: repeat-y looks like:

background-blend-mode Property

HTML

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.