CSS - Multi Background
Syntax and Basic Usage
To apply multiple backgrounds in CSS, you can use a comma-separated list of background properties within the background or background-image declaration. Each background layer is specified by a set of background properties, and the layers are stacked on top of each other in the order they are declared.
The basic syntax for applying multiple backgrounds is as follows:
Example: Multiple backgrounds using background property
.element {
background: background-layer1, background-layer2, ..., background-layerN;
}Or using the background-image property:
Example: Multiple backgrounds using background-image property
.element {
background-image: image1, image2, ..., imageN;
}Each background layer can have its own set of background properties, such as background-image, background-position, background-repeat, background-size, background-attachment, background-origin, and background-clip. These properties are specified for each layer individually.
It's important to note the order of the background layers. The first background layer specified is the topmost layer, and subsequent layers are stacked beneath it. The background layer at the end of the list is the bottommost layer.
Example of multiple backgrounds with properties
.box {
background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
background-position: center top, center, center bottom;
background-repeat: no-repeat, repeat, no-repeat;
background-size: cover, auto, contain;
}In this example, the .box element has three background layers:
| Layer | Image | Position | Repeat | Size |
|---|---|---|---|---|
| 1 | image1.jpg | center top | no-repeat | cover |
| 2 | image2.jpg | center | repeat | auto |
| 3 | image3.jpg | center bottom | no-repeat | contain |
By using a comma-separated list of background properties, you can create visually appealing and layered background effects. The ability to specify multiple backgrounds gives you greater control over the appearance of elements and opens up various design possibilities.
Background Properties
When using multiple backgrounds in CSS, you can apply various background properties to each background layer. Let's look at these properties.
Background-image
The background-image property specifies the image sources for each background layer. You can use a comma-separated list of URLs or gradient values to define multiple background images.
Example: Background-image
.element {
background-image: url("image1.jpg"), url("image2.jpg"), linear-gradient(to bottom, #fff, #000);
}Background-position
The background-position property sets the starting position for each background layer. You can use keywords (e.g., top, center, bottom, left, right), percentages, or length values to specify the position.
Example: Background-position
.element {
background-position: center top, 50% 50%, left bottom;
}Background-repeat
The background-repeat property controls how each background layer is repeated. You can use values like repeat, no-repeat, repeat-x (repeat horizontally), or repeat-y (repeat vertically).
Example: Background-repeat
.element {
background-repeat: no-repeat, repeat-x, repeat-y;
}Background-size
The background-size property sets the size of each background layer. You can use keywords like cover (scale the image to cover the entire element) or contain (scale the image to fit within the element), or specify length values.
Example: Background-size
.element {
background-size: cover, 50% auto, 100px 100px;
}Background-attachment
The background-attachment property determines whether a background layer is fixed or scrolls with the rest of the page. The values can be scroll (default) or fixed.
Example: Background-attachment
.element {
background-attachment: scroll, fixed, scroll;
}Background-origin
The background-origin property specifies the positioning area for each background layer. It can be set to border-box (default), padding-box, or content-box.
Example: Background-origin
.element {
background-origin: border-box, padding-box, content-box;
}Background-clip
The background-clip property defines the painting area for each background layer. It can be set to border-box (default), padding-box, or content-box.
Example: Background-clip
.element {
background-clip: border-box, padding-box, content-box;
}These background properties give you control over how each background layer is displayed, positioned, sized, and clipped. By combining these properties, you can create complex and visually appealing background effects.
Combining Background Properties
When working with multiple backgrounds, you can use the shorthand background property to specify multiple background layers in a single declaration. This approach allows you to write more concise and readable CSS code.
The shorthand background property combines the values of background-image, background-position, background-repeat, background-size, background-attachment, background-origin, and background-clip for each background layer. The values for each property are separated by spaces, and multiple background layers are separated by commas.
Example: Combining Multiple Background Layers
.element {
background: url("image1.jpg") center/cover no-repeat fixed,
url("image2.jpg") top left/50% 50% repeat-x,
linear-gradient(to bottom, #fff, #000);
}The .element has three background layers specified using the shorthand background property:
| Layer | Image/Gradient | Position | Size | Repeat | Attachment | Other Properties |
|---|---|---|---|---|---|---|
| 1 | url("image1.jpg") | center | cover | no-repeat | fixed | |
| 2 | url("image2.jpg") | top left | 50% 50% | repeat-x | (default) | |
| 3 | linear-gradient(to bottom, #fff, #000) | (default) | (default) | (default) | (default) |
When using the shorthand background property, you don't have to specify all the individual background properties for each layer. Any omitted values will be set to their default values.
It is important to note that when using the shorthand property, the order of the values for each background layer should follow the same order as the individual properties: background-image, background-position, background-size, background-repeat, background-attachment, background-origin, and background-clip.
Using the shorthand background property can make your CSS code more compact and easier to read, especially when dealing with multiple background layers. It allows you to specify all the background properties for each layer in a single declaration, reducing the amount of code you need to write.
However, if you only need to set a specific background property for a layer, you can still use the individual background properties separately. This can be useful when you want to override a specific property for a particular layer without affecting the others.
Layering and Stacking Order
When using multiple backgrounds in CSS, you need to understand how the background layers are stacked and ordered. The stacking order of background layers is determined by the order in which they are declared within the background or background-image property.
The background layers are stacked on top of each other, with the first declared layer being the topmost layer and subsequent layers being stacked beneath it. The last declared layer is the bottommost layer.
Example: Background Stacking Order
.element {
background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg");
}The stacking order of the background layers would be:
| Layer | Position |
|---|---|
image1.jpg |
Topmost |
image2.jpg |
Middle |
image3.jpg |
Bottommost |
The stacking order is important because it determines which background layers are visible and how they overlap. If a background layer has transparency or is not fully opaque, the layers beneath it will be visible through the transparent areas.
You can control the visibility and appearance of each background layer by adjusting its opacity, using transparent images or gradients, or by setting the background-size and background-position properties appropriately.
Example: Layering with Gradient and Image
.element {
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url("image.jpg");
background-size: cover;
}A semi-transparent linear gradient is layered on top of an image. The gradient has an opacity of 0.5, allowing the image beneath it to be partially visible. The background-size property is set to cover to make sure the image fills the entire element.
By carefully choosing the order and properties of background layers, you can create visually interesting and layered background effects. Experiment with different combinations of images, gradients, and transparencies to achieve the look you want.
It's worth noting that the stacking order of background layers is separate from the stacking context of elements in the HTML document. The background layers are stacked within the element itself and do not affect the stacking order of other elements on the page.
Examples and Use Cases
Multiple backgrounds in CSS open up possibilities for visually appealing and interactive designs. Let's look at some examples and use cases where multi-background can be used.
Creating Layered Background Effects
One common use case for multiple backgrounds is creating a layered effect. By stacking different images or gradients on top of each other, you can add depth and dimension to your background.
Example: Creating Layered Background Effects
.layered-background {
background-image: url("foreground.png"), url("middle-layer.png"), url("background.jpg");
background-position: center center, center center, center center;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 100% auto, 100% auto, cover;
}In this example, the .layered-background element has three background layers:
| Layer | Image | Position | Repeat | Size |
|---|---|---|---|---|
| Topmost | foreground.png |
Center | No repeat | 100% auto |
| Middle | middle-layer.png |
Center | No repeat | 100% auto |
| Bottommost | background.jpg |
Center | No repeat | Cover |
By adjusting the background-position and background-size properties, you can create a sense of depth and layering in your background design.
Combining Images and Gradients
Multiple backgrounds allow you to combine images with gradients. This technique can be used to create visual effects or to add textures to your background.
Example: Combining Images and Gradients
.image-gradient-background {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)),
url("background-texture.jpg");
background-repeat: no-repeat, repeat;
background-size: cover, auto;
}In this example, the .image-gradient-background element combines a linear gradient with a background image:
| Layer | Background | Repeat | Size |
|---|---|---|---|
| Top | Linear gradient from semi-transparent white to transparent white | No repeat | Cover |
| Bottom | background-texture.jpg |
Repeat | Auto |
By combining images and gradients, you can create visually rich and textured backgrounds that add depth and interest to your designs.
Parallax Scrolling with Multiple Backgrounds
Multiple backgrounds can also be used to create parallax scrolling effects. Parallax scrolling is a technique where different background layers move at different speeds during scrolling, creating a sense of depth and immersion.
Example: Parallax Scrolling with Multiple Backgrounds
.parallax-background {
background-image: url("foreground.png"), url("midground.png"), url("background.jpg");
background-attachment: scroll, scroll, fixed;
background-position: center center, center center, center center;
background-repeat: no-repeat, no-repeat, no-repeat;
background-size: 100% auto, 100% auto, cover;
}In this example, the .parallax-background element has three background layers:
| Layer | Image | Attachment | Position | Repeat | Size |
|---|---|---|---|---|---|
| Topmost | foreground.png |
Scroll | Center | No repeat | 100% auto |
| Middle | midground.png |
Scroll | Center | No repeat | 100% auto |
| Bottommost | background.jpg |
Fixed | Center | No repeat | Cover |
By setting different background-attachment values for each layer, you can create a parallax effect where the foreground and midground layers scroll at the same speed as the element, while the background layer remains fixed, creating an illusion of depth.
These are just a few examples of how multiple backgrounds can be used to improve your website's visual appeal and user experience. With creativity and experimentation, you can create stunning background effects that set your designs apart.