⚈
Deep Tech Point
first stop in your tech adventure

A complete guide to CSS background property with values explained through examples

August 16, 2021 | CSS

The background property in CSS is used to add the background effect(s) for any element – as a matter of fact – what is underneath the content of that element. It’s a shorthand property, so you can write properties in one single line instead of listing multiple properties.

.container {
background:
url("my-dropdown-arrow-icon.jpg"); /*image */
99% 50% /* position */
8% /* size */
no-repeat /* repeat */
fixed /* attachment */
padding-box /* origin */
content-box /* clip */
#9decb7; /* color */
}

Background is a shorthand property

So, shorthand background property is made of eight other properties, and you can use any combination of these properties, but make sure you use the order as listed:

We will take a look at each property in more detail below.

Follow the order of shorthand property

There is one thing that could make you wonder and lose a few minutes because of it. The order of properties. If you don’t specify a specific property in the background property, CSS will automatically set it to default. Or for example, in the case below, the background will be transparent, instead of gray, just because we didn’t follow the correct order. However, that is easy to fix. You need to apply the order of shorthand background property, so define the background-color after the background, or simply use the shorthand, following the order of properties. 

.container {
  background-color: gray;
  background: url(my-arrow.jpg);
}

1. Everything you need to know about background-image property

With a background-image property you can use:

  • a graphic or a regular image
  • gradients

    • It is super simple to use an image on a background – the url() value enables you to provide a file path to any image. 

    .container {
  background: url(my-arrow.jpg);
}

    If you want to reduce HTTP requests, you can also use URI, but be careful with that – there are a few downsides. When economizing with HTTP requests, you can use background-image to sprite images, which is great for icons and similar. There are a few neat sites that help you create them and automatically apply their positioning.
    And applying gradients, whether linear or radial, is not much more complicated either. Basically, gradients are just another form of a background image, but the difference is that the browser makes the image for you (additional load to consider). An example for a linear gradient goes like this: 

    .container {
  background: linear-gradient(yellow, gray);
}

    And for radial gradient, just replace the linear keyword with radial and add a keyword circle: 

    .container {
  background: radial-gradient(circle, yellow, gray);
}

    Remember, you can also set a fallback color if your background image does not load or the browser does not support gradient background. We’re saying below – create a radial gradient from yellow color to gray and if the browser does not support gradients, display gray: 

    .container {
  background: radial-gradient(circle, yellow, gray) gray;
}

    One another cool thing to be aware of when working with backgrounds – you can apply multiple backgrounds with layering – meaning multiple backgrounds layer over the top of each other. Basically, you can apply any property related to backgrounds, just make sure you create a comma-separated list, where each value in the comma-separated list corresponds to a layer – the comma separates the first image and its values from the second image and its values. The stacking order goes like this: list the image that should be at the front first (the first value is the top layer), and the image that should be at the back last (the second value is the second layer), and so on. Remember, the background color is always the last layer. You can set as many background images as you want, there’s no limit, and you can even animate your background images if you want. 

    .container {
  background:
    url(my-logo.png) bottom center no-repeat,
    url(my-background-pattern.png) repeat-y;
}

    2. Everything you need to know about background-position property

    The default value for background-position is 0 0, which places your background image at the top-left of the container. However, you can move a background image in the container with background-position property, and you can use 3 types of values:

    All modern browsers support up to four values for background-position when declaring values:

    3. Everything you need to know about background-size property

    Background-size property accepts 4 different syntaxes, and we will go through all four with examples explained:

    The keyword syntax for background-size property

    There are three keyword values available for the background-size property:

    The one-value syntax for background-size property

    When you declare only one value, whatever unit it is – px, em, % etc. – that value counts for the width, and the browser will set the height to auto.

    The two-values syntax for background-size property

    When you declare two values, the first value counts for the width, and the second value counts for the background image’s height.

    The multiple background syntax for background-size property

    When working with multiple images, you can combine any of the above methods, but you have to keep the background image stacking order in mind and add commas between each syntax. 

    html {
  background: url(my-icon.png), url(my-image.png);
  background-size: 500px 200px, auto;
  /* the my-icon.png is 500x200px, and the my-image.png is set to auto */
}

    5. Everything you need to know about background-repeat property

    As the name of the property says, background-repeat specifies if and how your background image will repeat. It’s like tiling – covering a background with a repeating pattern in a specific direction. The possible values for the background-repeat values with explanations are:

    The example below shows the my-icon.jpg will repeat horizontally in the container, without stretching or squeezing: 

    .container {
  background-image: url(my-icon.jpg);
  background-repeat: repeat-x; 
}

    If you’re working with multiple backgrounds, simply add multiple values, but separate them with commas, as it’s the convention for multiple backgrounds.

    6. Everything you need to know about background-attachment property

    This property defines how to move the background relative to the viewport. It has three values:

    7. Everything you need to know about background-origin property

    The background-origin property specifies where exactly the background should be applied. With the background-origin property you can apply three values:

    However, when the background-attachment is fixed, CSS will ignore the background-origin, whatever value you apply to it.

    8. Everything you need to know about background-clip property

    background-clip is similar to background-origin, except it clips the background instead of resizing it as the background-origin does. background-clip helps you control how far a background image will extend beyond an element’s padding or content. In addition to the inherit, initial and the unset, background-clip property has three values:

    9. Everything you need to know about background-color property

    The background-color value is listed as the last one in the shorthand background property and specifies the background color of any HTML element. We talked already about colors and gradients at the beginning of the article when we talked about background-image property and mentioned the importance of order when listing properties. In the example below, we defined the h3 elements to have a whitesmoke background, while all divs will have a yellow background color.
    In CSS, you can specify a color with a valid color name, which CSS can offer for you – in our example we used whitesmoke and yellow, but you can also go for a HEX value (“#F5F5F5”) or an RGB value – in our case that would be rgb(245, 245, 245). The background color is set like this:

    
h3 {
  background-color: whitesmoke;
}

div {
  background-color: yellow;
}

    Background-color opacity vs transparency using RGBA

    Here, it makes sense to bring out that you can additionally specify the opacity of an element – whether and how much you want the color of your element to be transparent. Values go from 0.0 (completely transparent) to 1.0 (no transparency). However, be careful – if you add transparency to the background of let’s say <div> element, all of div’s child elements will inherit that transparency. So, if you have text in that div, the text will become transparent too, which will make it harder to read.
    You can avoid adding transparency to child elements (if HTML structure allows) by using RGBA color values RGBA stands for red, green, blue and alpha, where the alpha parameter specifies a level of transparency with a number between 0.0 (completely transparent) and 1.0 (fully opaque or no transparency). 

    div {
  background: rgba(245, 245, 245, 0.4) /* white smokebackground with 40% opacity */
}

/* or like this */

div {
  background-color: whitesmoke; 
  opacity: 0.4
}