Background

The CSS background properties handle the display of background effects on HTML elements.

background-attachment

The background-attachment CSS property defines how the background of an element scrolls relative to its containing parent, and it looks like this:

background-attachment: fixed;

Description

There are three values: scroll, fixed, and local.

• scroll: The background does not move within its container
• fixed: The background stays fixed to the viewport, no matter what
• local: The background scrolls within its container and the viewport

CSS:

.scroll {
  background-attachment: scroll;
}
.fixed {
  background-attachment: fixed;
}
.local {
  background-attachment: local;
}

Here is a demo in CodePen: http://tiny.cc/css-background

background-blend-mode

The background-blend-mode CSS property specifies how the background image of an element should blend with its background color, and it looks like this:

background-blend-mode: multiply;

Description

There are 18 possible blend mode values:

• color: Hue and saturation from the top color prevail, but the luminosity of the bottom color is added. Gray levels are preserved.
• color-burn: The final color is the result of taking the bottom color and inverting it, piding the value by the top color, and then inverting that value.
• color-dodge: The final color is the result of piding the bottom color with the inverse of the top one.
• darken: The final color is the result of taking the darkest value per color in each channel.
• difference: The final color is the result of taking the lighter color and subtracting the darker color of the background image and background color.
• exclusion: The result is similar to the difference, but with lower contrast.
• hard-light: If the bottom color is darker, then the result is multiply. However, if the bottom color is lighter, the result is screen.
• hue: Takes the hue of the top color, and the saturation and luminosity of the bottom color.
• inherit: The final color inherits the blend mode of its parent container.
• initial: This is the default value without any blending.
• lighten: The result is the lightest values per color from each channel.
• luminosity: The result is the luminosity of the top color, and the hue and saturation of the bottom one.
• multiply: Multiply the top and bottom colors. This is the same effect as printing the colors on a translucent film and laying them one on top of the other.
• normal: The final color is the color on top, regardless of the color underneath it.
• overlay: The final color is multiply if the bottom color is darker. And it would be screen if the bottom color is lighter.
• saturation: The final color is the saturation of the top color plus the hue and luminosity of the bottom one.
• screen: Invert both the top and bottom colors, multiply them, and then invert that final color.
• soft-light: Same as hard-light attribute but softer, like pointing a diffused light on the final color.

In the following example, we will declare two backgrounds, an image and a color, and then apply a blend mode to them:

CSS with longhand:

.element {
  width: 500px;
  height: 500px;
  background-image: url('../images/image.jpg');
  background-color: red;
 background-blend-mode: multiply;
}

CSS with shorthand:

.element {
  width: 500px;
  height: 500px;
  background-image: url(../images/image.jpg) red;
 background-blend-mode: multiply;
}

Tip

Notice that in the second example, the path to the image is not inside quotes. The quotes, single [''] or double [""], are optional.

CSS-Tricks has a great Pen showing all these blend modes. However, I forked it to improve a few things on it.

So, check out the CodePen demo with all the blend modes at http://tiny.cc/background-blend-mode

background-clip

The background-clip CSS property helps define whether an element's background extends below its border or not, and it looks like this:

background-clip: border-box;

Description

There are four values: inherit, border-box, padding-box, and content-box.

inherit

This takes the value from its parent element.

border-box

This makes the background cover the entire container, including the border.

padding-box

This makes the background extend only up to where the border starts.

content-box

This works like border-box, but it will take into consideration any padding, thus creating a gap between the border and the background.

CSS:

.element {
  background-clip: border-box;
}

Here is a demo in CodePen: http://tiny.cc/background-clip

background-color

The background-color CSS property defines the solid background color of an element, and it looks like this:

background-color: red;

Description

Also, transparent is actually a color in CSS.

Tip

If we wanted to set a gradient background color, we'd have to use the background-image property instead. This is because gradients are actually images.

The color value can be defined using any of the following methods:

• Named color
• Hexadecimal
• RGB and RGBa
• HSL and HSLa

CSS:

/*Named Color*/
.element {
  background-color: red;
}
/*HEX*/
.element {
  background-color: #f00;
}
/*RGB*/
.element {
  background-color: rgb(255,0,0);
}
/*RGBa*/
.element {
  /*Background has 50% opacity*/
  background-color: rgba(255, 0, 0, .5);
}
/*HSL*/
.element {
  background-color: hsl(0, 100%, 50%);
}
/*HSLa*/
.element {
  /*Background has 50% opacity*/
  background-color: hsla(0, 100%, 50%, .5);
}

background-image

The background-image CSS property sets an image or gradient in the background of an element, and it looks like this:

background-image: url(../images/background.jpg);

Alternatively, it could also look like this:

background-image: linear-gradient(red, orange);

Description

This property supports the JPG, PNG, GIF, SVG, and WebP image formats.

We can also use the none value to declare the absence of an image.

An element can also have several background images in a single declaration.

When it comes to gradients, there are two styles: Linear and Radial.

Linear

Its syntax is linear-gradient. These gradients can go vertical, horizontal, or diagonal.

Radial

Its syntax is radial-gradient. These gradients are circular in nature, and by default, they will adapt to an element's dimension. For example, if the element is a perfect square, it would make a perfect circular radial gradient. However, if the element is a rectangle, then the radial gradient would look like an oval.

We can add as many colors in a gradient as we want or need to. Unless it is strictly necessary, I recommend that you steer away from doing so, as it can have a negative impact on browser performance.

Additionally, in order to give us more control over the gradients, we can define where a gradient color stops so that the following one can start. This is called color stops. Color stops can be defined in pixels or percentages. Percentages are more commonly used because of their relative nature, which helps maintain the integrity and proportions of the gradients.

CSS:

/*Graphic file*/
.element {
  background-image: url(../images/bg-texture.jpg);
}
/*Multiple images*/
.element {
  background-image:
    url(../images/bg-icon.svg),
    url(../images/bg-texture.jpg);
}
/*Linear gradient*/
.element {
  background-image: linear-gradient(red, orange);
}
/*Linear Gradient with color stops*/
.element {
  background-image: linear-gradient(red 40px, orange 25%, green);
}
/*Radial gradient*/
.element {
  background-image: radial-gradient(red, orange);
}
/*Radial gradient with color stops*/
.element {
  background-image: radial-gradient(red 40px, orange 25%, green);
}

background-origin

The background-origin CSS property defines how the background gets rendered inside an element, and it looks like this:

background-origin: border-box;

Description

This property works similarly to the background-clip CSS property, except that with background-origin, the background is resized instead of clipped.

There are four values: border-box, padding-box, content-box, and inherit.

• border-box: The background extends all the way to the edge of the container, but under the border
• padding-box: The background extends to meet the border edge to edge
• content-box: The background is rendered inside the content box
• inherit: This is the default value

CSS:

.element {
  background-origin: border-box;
}

Here is a demo in CodePen: http://tiny.cc/background-origin

background-position

The background-position CSS property allows us to place the background (image or gradient) anywhere within its parent container, and it looks like this:

background-position: 10px 50%;

Description

We can use three different types of values: predefined keywords, percentage, and length.

Predefined keywords

Values such as left, right, top, and bottom are the predefined keywords.

Percentages

Values such as 5% and 80%.

Length

Values such as 15px 130px.

This property requires you to declare two values: the first value relates to the x axis (horizontal) and the second value to the y axis (vertical).

The default value is 0 0; which is exactly the same as left top.

CSS:

/*Default values*/
.element {
  background-position: 0 0;
}
/*Keyword values*/
.element {
  background-position: right bottom;
}
/*Percentages values*/
.element {
  background-position: 5% 80%;
}
/*Length values*/
.element {
  background-position: 15px 130px;
}

Here is a demo in CodePen: http://tiny.cc/background-position

background-repeat

The background-repeat CSS property has two functions:

1. To define whether a background image is repeated or not
2. To determine how the background image is repeated

It looks like this:

background-repeat: no-repeat;

Alternatively, it could also look like this:

background-repeat-x: repeat;

Description

This property only works if background-image has been declared.

There are four values: repeat, repeat-x, repeat-y, and no-repeat.

• repeat: The background image will repeat in both x and y axes. This will completely fill the container. This is the default value.
• repeat-x: The background image will only repeat in the x axis, hence, horizontally.
• repeat-y: The background image will only repeat in the y axis, hence, vertically.
• no-repeat: The background image will not be repeated and will only display one instance of it.

CSS:

/*Default value*/
.repeat { background-repeat: repeat; }
/*Repeat horizontally*/
.repeat-x { background-repeat: repeat-x; }
/*Repeat vertically*/
.repeat-y { background-repeat: repeat-y; }
/*No repeat*/
.no-repeat { background-repeat: no-repeat; }

Here is a demo in CodePen: http://tiny.cc/background-repeat

background-size

The background-size CSS property defines the size of the background image, and it looks like this:

background-size: contain;

Description

There are five values: a length value, a percentage value, auto, contain, and cover.

Length value

This is when we use one of the following units: px, em, in, mm, cm, vw, and so on.

Percentage value

This is when we use percentages such as 50%, 85%, and so on.

auto

This value scales the image in the corresponding direction (horizontal or vertical) in order to maintain its aspect ratio and not deform it.

contain

This value makes sure the image can be seen completely within its parent container. The image does not bleed on the edges; it's "contained".

cover

This value scales the image and takes the longest dimension (horizontal or vertical). It makes sure that the image completely covers that dimension. Bleeding can occur if the container and the image have different aspect ratios.

When declaring the size of the background, we can use either one or two values. The first value is the width, and the second is the height of the background image.

Using one value means that the second value is set to auto. When using two values, we are then defining the width and height values of the background image.

We can use any measurement unit we want. Pixels, percentages, and the auto value are the most commonly used though.

We can even combine multiple images in the same container. The background shorthand property is the best way to handle this situation.

CSS:

.contain {
  background-size: contain;
}
.cover {
  background-size: cover;
}
.auto {
  background-size: auto;
}
.multiple {
  background-image: 
    url(../images/image-1.jpg),
    url(../images/image-2.jpg);
  background-size: 150px 100px, cover;
}

Here is a demo in CodePen: http://tiny.cc/background-size

background

The background CSS property is the shorthand in which we can list all background values.

I often see many developers write the longhand version of the property to declare a single value, such as a color. Here is an example:

background-color: red;

Although this is totally fine, I prefer to use the shorthand version for practically everything:

background: red;

This is a bit more scalable because if we need to add any other values, all we need to do is add the new value to this declaration rather than writing a separate one. However, at the end, it's all a matter of personal style.

CSS:

/*BG color*/
.element { background: red; }
/*BG color and image*/
.element { background: url(../images/bg.png) red; }
/*BG color, image and position*/
.element { background: url(../images/bg.png) 50% 50% red; }
/*BG color, image, position and do not repeat*/
.element { background: url(../images/bg.png) 50% 50% red no-repeat; }
/*BG color, image, position, do not repeat and size*/
.element { background: url(../images/bg.png) 50% 50% / contain red no-repeat; }
/*BG color, image, position, do not repeat, size and clip*/
.element { background: url(../images/bg.png) 50% 50% / contain red no-repeat content-box; }
/*BG color, image, position, do not repeat, size, clip and attachment*/
.element { background: url(../images/bg.png) 50% 50% / contain red no-repeat content-box fixed; }