Everything You Need to Know About Backgrounds in CSS

One of the most useful features of CSS is the ability to add backgrounds to your HTML elements.

After reading this article you will become very comfortable with backgrounds. So, let's jump in.

Background Color

A good starting point would be background color. The rule is self-explanatory. You add this rule to your element and BAM!

(Make sure you have some content in your element or some width and height. Otherwise, you will not be able to see it.)

.element-class-name {
  background-color: green;
}

Let's say this square represents our element. So the background color is green now.

The default value of the background-color is transparent. It means no color.

Background Image

Images are one of the most important aspects of websites. We can't think of a webpage without images.

There are image tags for inserting images into your webpage. But background images take this into a whole new level.

Now, we want to add an image to our box as a background image. It's very easy. You just need the image URL.

Here is an image by Foodie Girl of StokSnap. We want to add this image to our box as a background.

So we will write,

.element-class-name {
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/cookies-dessert_XKGJLSWRQG.jpg")
}

Now our box looks like this,

What happened? The full image is not showing. The reason is the dimension of our box is lower than the resolution of the image.

How can we solve this problem? We can use the background-size property to solve this issue.

Background Size

.element-class-name {
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/cookies-dessert_XKGJLSWRQG.jpg")
  background-size: 100%;
}

Now our box looks like this,

Are you kidding me? What is the problem now?

The 100% value we have given, is the measurement of the width of the element that is going to be filled by the image.

We haven't specified any height. That's why the height of the image falls back to its default value 'auto'. It means the browser would auto adjust the height of the image to keep the original aspect ratio of the image.

(There is a property called background-repeat which repeats a background image if there is extra space to repeat. By default, the background-image property repeats an image both horizontally and vertically. You can turn off repeat by setting background-repeat: no-repeat)

To include a height we can add another value to the background-size property.

.element-class-name {
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/cookies-dessert_XKGJLSWRQG.jpg")
  background-size: 100% 100%;
}

Now it looks like this:

Our problem is fixed, but the image looks a bit stretched. If you do not care about aspect ratio then you can follow this method to always contain your whole image as a background.

There are some keywords for this background-size property.

.element-class-name {
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/cookies-dessert_XKGJLSWRQG.jpg")
  
  background-size: cover; #this will resize the background image to make sure the element is fully covered.
/
  background-size: contain; #this will resize the background image to make sure it remains fully visible.
}

Background Position

Sometimes we need to position our background image so that we can show a specific part of our image. For example, let's say we have this image:

We want to show our viewers the hammer part only. In this case, the background-position property is very handy.

Like the background-size, the background-position takes two values. The first one is for the horizontal axis and the second one for the vertical axis.

From the horizontal axis, the hammer in the image looks 15% to the right and it seems from the vertical axis the hammer is a little bit down from the top. So, we can set 5% for that.

.element-class-name { 
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/construction-tools_EJZBX7UMTV.jpg");
  background-size: 100% 100%;
  background-position: 15% 5%;
}

But it looks like this now,

So, our background-position property is not working. The issue is the background-size property is set to 100% 100%, as a result, the image is not big enough to move.

We have to increase the size of the background image in order to move it.

.element-class-name { 
  background-image: url("https://cdn.stocksnap.io/img-thumbs/960w/construction-tools_EJZBX7UMTV.jpg");
  background-size: 200% 240%;
  background-position: 15% 5%;
}

Perfect. As the width of hammers was 50% of the image I gave it horizontal size of 200% and height was less than 50%, so I gave it a vertical size of greater than 200%. To be exact I found 240% work best.

Want to master these properties? Just play around with the property values.

Background Shorthand

The properties we discussed can be used in a shorthand form.

.element-class-name {
  background: url(image)  position / size repeat ;
}

Our previous hammer background shorthand will look like,

.element-class-name {
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/construction-tools_EJZBX7UMTV.jpg") 
              15% 5% / 200% 240%;
}

Very easy!

Multiple Backgrounds

You can use multiple backgrounds just by adding them to the shorthand.

Let's see an example:

.element-class-name {
  background: 
              url("https://cdn.stocksnap.io/img-thumbs/960w/construction-tools_EJZBX7UMTV.jpg") 50% 50% / 
              50% 50% no-repeat,
              url("https://cdn.stocksnap.io/img-thumbs/960w/cookies-dessert_XKGJLSWRQG.jpg") 
}

As you can see the image that comes first in the shorthand is also the top image.

You can also use colors as your multiple backgrounds.

Here's another example with a linear gradient as its color background.

.element-class-name {
  background: 
              url("https://cdn.stocksnap.io/img-thumbs/960w/construction-tools_EJZBX7UMTV.jpg") 50% 50% / 
              50% 50% no-repeat,
              linear-gradient(lightgreen, lightblue);
}

If you want to know more about linear-gradients check out this article: https://medium.com/@patrickbrosset/do-you-really-understand-css-linear-gradients-631d9a895caf#.tjka033kc

You can also add some overlays to your background pictures by using multiple backgrounds.

Summary

In this article, I tried to give you a practical approach to implement background properties. We learned about background-color, background-image, background-size, background-position, background shorthand, and multiple backgrounds.