Background — Content layout fundamentals

• Setting a color or image
• Image size
• Positioning the background image
• The order of background properties

Layout designers often have to style more than just specific elements such as tables, lists, text, media elements, and forms. Sometimes, they also need to style the blocks that the elements are located inside. Websites often have backgrounds, be they images, gradients, or solid colors. Use the background property to create them. They can be applied both to the entire page and to small blocks.

The background property is shorthand for 8 properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

Note: shorthand properties reset all previous related properties. This is important because you may already have background images, with sizes and positioning already set. If you add color using the background property in a block that already has values for one of the eight properties set, then those properties will be reset to their default values.

This feature also brings certain conveniences; when you create your component, you can set the desired properties using shorthand properties. This makes it easy to reuse the background since the previous properties won't affect our component.

Setting a color or image

The basic function of the background property is to set a background color or image. The following properties are used for this purpose:

• background-color
• background-image

There are different ways to set colors. There's hexadecimal, taking rgb(), hsl(), and others. At the end of the lesson, we'll give you a link to the site where you can select any color and get its code to set as a value for the background-color property

Note that backgrounds can be set either for the entire page or its individual parts. For example, you can highlight a word in a sentence. You'll see exactly this kind of "local" background setting in real projects, especially when using gradients.

It is possible to set an image at the same time as the background, using the background-image property. The two properties are independent of each other, so you can set both background color and image, or you can set only one.

The background-image takes the url() function as its value. A similar principle is used when adding fonts to a page.

It may seem that the result is the same as when you use the <img /> tag. However, there's an important difference. When you use background-image, the image isn't in the HTML and does not participate in setting block sizes.

In the example above, the block with the image class is not only given an image but also has its width and height properties set. Without them, the image will disappear from the page because the block will basically be empty.

When setting a background image, it's a good idea to also specify the dimensions or make sure that the size of the element is sufficient for the background image.

One feature of using background-image is the possibility to set several background images at once. To do this, you just need to give them and separate them using commas:

background-image:
  url('path_to_image_1'),
  url('path_to_image_2');

You can use this method to layer images on top of each other. They'll be displayed in the order in which they are specified; the first image will be higher than the second, the second higher than the third, and so on.

When you use background images, the block that the property is applied to may be wider or taller than the image. In these situations, browsers copy the background to fill all the available space.

CSS allows you to control whether the browser will clone an image, and if so, in which direction. The background-repeat property is responsible for this. It takes one of the following values:

• repeat is the default value. Repeats the image in all directions as long as space permits
• repeat-x repeats horizontally only
• repeat-y repeats vertically only
• no-repeat does not repeat
• round repeats the image, allowing it to be compressed to fit the maximum number of copies. This value is rarely used because it distorts the image
• space repeats the maximum number of images without cropping them. The copies are placed at the edges first, and then evenly placed in other parts of the block. There may be gaps between the copies

Image size

In the previous examples, the size of the image and its position were determined by the browser. By default, the image size is equal to the original size from the file, and its position is fixed in the upper-left corner of the block.

However, we can't always guess what size the image needs. It depends on a lot of factors, for example:

• The user's screen resolution
• Project adaptability
• Interactivity refers to when the user can interact with the page and this changes some of its parts

Under these conditions, you may need a single image that'll be adjusted to suit the needs of the page. For this, we have the background-size property, which takes two values:

• Image width
• Image height

If only the width is specified, the height will be adjusted automatically to preserve the proportions of the image. This option is used most often. You can use all of the units we've looked at for the value of this property.

In this example, it's a very good idea to go to CodePen itself and try different browser width sizes. Note the size of the left image - it will always occupy 30% of the block's width, even if the image extends beyond the block's borders. The original proportions are always preserved. The right image has fixed values that will not change when you change the page width.

The background-size property has two reserved values:

• cover — the image is scaled to take up the entire block. In this case, the image may be cropped
• contain — the image is scaled to cover the block area as much as possible, but not to crop the image itself

These values may be seen when creating top sections of a site, especially in cases of background images that cover the entire width of the screen.

Note: when you're creating pages and adding background images, make sure that the original image has sufficient resolution. If you try to stretch a small image, it'll be very pixelly, which doesn't make the page particularly attractive

Another property that affects the size of the image is background-origin. It works similarly to the box-sizing property, which is responsible for how the browser handles padding and block borders.

The background-origin property determines whether the background image will be placed on the padding or borders. The property takes one of these values:

• border-box — the background image is drawn on the whole block, including padding and borders
• padding-box is the default value. The background image is drawn in the area of the block and its padding but does not take into account the size of the borders defined by the border property
• content-box — the background image is not drawn over the whole block, but over the content area within it

Let's look at an example:

You can see that the images still overlap the borders, for example with padding-box, even though we expected a different effect. The background going beyond the borders because the browser doesn't crop images, and the border is not solid.

This is where the background-clip property helps. Its job is to determine exactly how to crop the image when it leaves the block. Like background-origin, the property takes on one of three values:

• border-box — cut relative to the border box
• padding-box — cut relative to the padding box
• content-box — cut relative to the content box

Another value is text, which is still experimental and suggests cropping the image relative to the text. Over time, the feature will be improved and you'll be able to use it without issue. We added it in the example, but it may not work correctly in other environments.

Note: The background-clip property affects not only the background image, but also the background color set using the background-color property

Positioning the background image

There are two properties left in the background property set. They are:

• background-position — the position of the background inside the block
• background-attachment — the background scrolls with the content

By default, all images appear relative to the upper-left corner of the block, but often the image needs to be positioned at a different point. The background-position property is used for this. Its syntax is quite confusing, so you should start with the preset values, which cover a substantial part of the tasks:

• top - places the background in the center and holds it at the top
• left - places the background in the center and holds on the far left
• right - places the background in the center and holds on the far right
• bottom - places the background in the center and holds it at the bottom
• center - places the background in the center

The same behavior can be specified using x and y coordinates. For example, to recreate the behavior of the top value, you need to specify a value of 50% for the x-axis and 0 for the y-axis. You can use any of the previously learned units: p, e, %, and so on.

.bg {
  /* The same as background-position: top */
  background-position: 50% 0;
}

You can also specify the keywords we've looked at, top, right, bottom, left, and center as values for the x and y axes. This helps make CSS more expressive and readable.

Our last property is background-attachment. Sometimes, the background image is the key to all content, and we as developers want it to always be in the user's line of sight, even when scrolling. Alternatively, we want the background to be in the same place as the content.

The background-attachment property allows you to control this behavior. To do this, we set one of these values:

• scroll is the default value. The background image is positioned according to the background-position property. It's fixed in that area and doesn't disappear when you scroll through the content
• fixed is the value has an interesting feature. It's not positioned relative to the block where the background property was set, but rather relative to the entire page. However, it will only be visible within the block where the background was set. Yet, because this behavior isn't as obvious, this value is rarely used
• local - the image is fixed at a certain point relative to the content. In the example below, the content is text, so the background image is exactly centered since the background-position has the center value

The order of background properties

After studying all of the available properties, we now need to learn the order they're written in the shorthand background rule and which properties are mandatory.

All the properties can be written in any order. There are small exceptions, but they go too deep into the theory of creating backgrounds and they'll be dealt with in the course where it will be necessary.

The background-position and background-size properties must be written together. The / symbol is used to write them, and position must go before size. This is what it looks like in the real CSS file:

.element {
  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff
}

The following properties are set in this notation:

• background-image: url("../assets/images/hexlet.png")
• background-position: center
• background-size: 0.5rem
• background-repeat: no-repeat
• background-color: #288cff

All properties not specified will have the default value, which is convenient when creating your own components.

In this lesson, we learned about the properties that make up the shorthand background property:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

All of them can be used either alone or as part of the background property, either when setting the initial values or creating your own component, which you don't want to depend on values specified earlier.

The background allows you to greatly expand the possibilities for styling elements. Teaching yourself, studying ready-made layouts on the Internet, and practicing will help you learn the property faster and find many interesting and non-standard ways it can be used.

Recommended materials

1. HTML color codes