Two background images. Multiple backgrounds and strokes using CSS2. What's up with compatibility?

When we talked about the background-image property at the beginning of this section, we didn't mention one feature: in CSS3, you can add multiple backgrounds to a single element by simply listing them separated by commas. This is especially necessary when an element with a background has a variable width or height, and the background must adapt to its size.

How to Set Multiple Backgrounds in CSS

We will show you an example that may well be useful in practice. Let's imagine that we need to place a block of text in a frame. The frame represents graphic file in PNG format:

In this problem, the height of the text is unknown to us - we do not know whether the text will fit completely within the frame or go beyond it. Because of this unknown quantity, we can't risk using the original frame design as a background. Nose using CSS we can make this frame extend as needed. To do this, you will have to divide the original drawing into graphic editor into three parts - top, bottom and middle - and save each file separately. Like this:

Top of the frame

Bottom of frame

Middle of the frame

We will make the background with the image of the middle of the frame repeating along the axis Y, while the top and bottom of the frame will not be duplicated. Let's add all three backgrounds to the element, and also write down other necessary styles:

Frame ( background-image: url(https://goo.gl/tKyzHt), /* top of the frame */ url(https://goo.gl/SUKymM), /* bottom of the frame */ url(https: //goo.gl/Km7HVV); /* middle of the frame */ background-position: center top, /* position of the top of the frame */ center bottom, /* position of the bottom of the frame */ center top; /* position of the middle of the frame */ background -repeat: no-repeat, /* the top of the frame is not repeated */ no-repeat, /* the bottom of the frame is not repeated */ repeat-y; /* the middle of the frame is repeated vertically */ background-size: contain; /* here for all backgrounds have the same value */ height: auto; /* block height depends on the amount of content */ width: 400px; /* block width is fixed */ padding: 30px; /* block internal padding */ )

Each background must be separated by a comma, and only after the last one is a semicolon placed to indicate the end of the declaration. For convenience and better readability of the code, we recommend specifying each URL on a new line.

Background pictures are placed according to the principle of layers - one below the other. The background specified first will be on the top layer, the second background will be below the first, and the third will be below the first two. That's why we placed the picture with the middle of the frame at the very end - so that it does not overlap the top and bottom parts.

Next, the code sets the background-position and background-repeat properties for each background (the same order in which the background images are arranged). Yes, you guessed it right: if required, then you can specify the values ​​of other background properties, separated by commas. And if you need to apply one value to all backgrounds, you write it as usual (in our case, the background-size: contain property).

Well, let's take a look at the result:

As you can see, the frame is positioned correctly, and now it beautifully frames the contents of the block. What happens if we increase the amount of text in the block? Let's look:

The middle part of our frame was duplicated vertically the required number of times, as if stretching out in length and adjusting to the text. This is the effect that could not be realized if we used a solid image of the frame. Let's add even more text for clarity:

Of course, multiple backgrounds can be used to solve other problems. We showed just one example out of many. Try to come up with your own situation and practice using a group of background pictures.

Using shorthand notation

The background property also accepts multiple values. In the case of using several backgrounds, an abbreviated recording can be much more convenient, because it is more difficult to get confused. Let's rework our code for the frame:

Background: url(https://goo.gl/tKyzHt) center top / contain no-repeat, /* top of frame */ url(https://goo.gl/SUKymM) center bottom / contain no-repeat, /* bottom of frame */ url(https://goo.gl/Km7HVV) center top / contain repeat-y; /* middle of frame */

This option looks less cumbersome and is easier to understand.

You can add multiple background images to one element at once through a single background property. This allows you to get by with one element to create a complex background or one image, displaying it several times with various settings. All images with their parameters are listed separated by commas, with the image that is displayed on top of the other images indicated first, and the last, respectively, the lowest image. Example 1 shows how to create a background with three images.

Example 1. Three backgrounds

If you need to separately set some style property for the background, like background-size as in the example above, then the parameters for each background are listed separated by commas. The result of this example is shown in Fig. 1.

Rice. 1. Background with three images

Individual background images allow you to change their position and also animate them, as shown in example 2.

Example 2: Animated background

Let's now consider how to use one picture to create a block with a frame (Fig. 2). The width of the block is fixed, and the height varies depending on the volume of the block’s contents.

Rice. 2. Hand-drawn frame

The figure clearly shows the upper and lower parts, which need to be cut out in a graphics editor and positioned horizontally. The middle part is selected so that it is repeated vertically without seams. The picture has a pronounced repeating pattern, so there should be no difficulty in highlighting it. The result will be a prepared image (Fig. 3). The checkered field indicates transparency; it allows you to set a colored background along with images and easily change it through styles.

Rice. 3. Image prepared for the background

The background itself is displayed by the background property, which also specifies the coordinates of the desired fragment. The parameters of each background are listed separated by commas, and in this case their order matters. We want the top and bottom of the block to not overlap, so we put them first (example 3). The background color is specified last.

Example 3. Several background images

The first background displays the top border of the block, the second background - the bottom, and the third - the vertical borders. The last one is the color that is visible in the transparent central part of the block (Fig. 4).

Task

Add two background images for a block using CSS3.

Solution

Modern browsers allow you to add an arbitrary number of background images to an element, listing the parameters of each background separated by commas. It is enough to use the universal background property and specify one background for it first and a second one separated by a comma.

For example, consider creating vertical decorative lines to the left and right of the block. To do this, first prepare images that should be repeated vertically without joints. In Fig. 1 shows the background image, which will be displayed on the left edge, and in Fig. 2 picture for display on the right edge.

Rice. 1. Background image for the border on the left

Rice. 2. Background image for the border on the right

The block element to which the background is added is usually the tag