CSS 3: The Complete Guide - background-size Style

1 - A number. With this value we can specify the width and height of the background image. This value can be in both pixels and percentage. Example:

div {
	background: url('example.jpg') no-repeat;
	background-size: 100px;
}

If we specify only one number, as in the case above, both the width and the height will be 100 pixels. If we want to specify the height as well, just provide its value after the first number, as we can see below:

div {
	background: url('example.jpg') no-repeat;
	background-size: 100px 200px;
}

Now let's talk about the values “cover” and “contain”. Both have the same objective: to make the background image occupy as much space as possible in the area where it was applied and also maintain the image's proportion. But there is a small difference between these two values.

2 - Expression “cover”. This value makes the image occupy the entire space where it was applied. However, to do this, it crops the image if it has different dimensions than the area of its occupation.

3 - Expression “contain”. This value makes the image occupy as much space as possible in the area where it was applied. However, it does not crop the image. Even if it has different dimensions than the area of its occupation, it will be ensured that it is “contained” within the tag completely. If the image cannot cover 100% of the area, the background color of the tag will be used, if it is defined.

How about we develop a small example to see this difference in practice?

Example

Let's create an HTML file that will contain a

, where we will add a background. It will have the ID “background-example”. This HTML file will also reference a file called style.css, where we will apply our CSS styles.

First, let's test the background-size by specifying a numeric value. The content of the CSS file will be as follows:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: 200px;
}

Explanation: our

will have a width of 600 pixels and a height of 500 pixels. We also defined a gray background color to see the actual size of the

. Finally, our background image will have 200 pixels in both width and height. In other words, it will have smaller dimensions than the

where it was applied. The result in the browser will be as follows:

The image was added as a background without problems. However, there was a lot of empty space in our

, as the image had smaller dimensions than it.

Now let's apply the value “contain”. The CSS content will be as follows:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: contain;
}

The result in our browser will be this:

Now our image got bigger and occupied a large part of the

. However, this was the maximum possible occupation without having to crop the image. Thus, it was necessary to use the background color to fill the total area of the

.

Finally, let's use the value “cover”. Our CSS will look like this:

#background-example {
	width: 600px;
	height: 500px;
	background: url('./image.jpg') no-repeat;
	background-color: #ccc;
	background-size: cover;
}

This will be the result in the browser:

Now our image occupied the entire area of the

. However, for this to be possible without losing its proportion, it was necessary to crop it.

One might think: “But now you can't see the image properly. After all, a large part of it was cut off.” One thing we can do to solve this problem is use the background-position style. Let's add it to our CSS selector by specifying as its value the expression “center”:

background-position: center;

The result in the browser will now be this:

The image looks much better now, as it is centered. The background-position style is quite interesting. I think we can talk more about it, but that will be for a next article.

In this article, we have seen through practical examples the differences between the possible values for the background-size style. With this knowledge, we are now prepared to decide when to use this style and which of its values to choose.

If you liked this content, don’t forget to share it with others, it helps us a lot to keep producing cool materials for you. See you in the next article! :)

css-3

css

backround