CSS Multiple Backgrounds

One of the lesser-known but incredibly useful feature of CSS is the ability to apply multiple backgrounds to an element. This powerful feature allows you to create complex and visually appealing web pages with ease. In this article, we will dive deep into CSS multiple backgrounds, exploring how to add them, use multiple background colors, combine background images and control image repetition.

How to Add Multiple Backgrounds in CSS?

To add multiple backgrounds to an HTML element using CSS, you can use the background property. This property can accept multiple values, each separated by a comma. Each value corresponds to a distinct background layer. Let's take a look at a simple example:

.element {
  background: 
    url('background-image1.jpg') no-repeat center center, /* Layer 1 */
    url('background-image2.jpg') no-repeat top left,     /* Layer 2 */
    #f2f2f2;                                             /* Layer 3 */
}

In the code above, we have applied three background layers to the .element class. Here's a breakdown of each layer:

1. Layer 1: This layer uses an image background-image1.jpg centered both horizontally and vertically. The no-repeat property ensures that the image does not repeat.

2. Layer 2: This layer uses another image background-image2.jpg, positioned at the top left corner. Again, no-repeat prevents repetition.

3. Layer 3: This layer is a solid background color #f2f2f2.

By using this approach, you can combine background images and colors to create visually rich elements.

How Do I Get Multiple Background Colors in CSS?

Adding multiple background colors in CSS is straightforward. You can define each color as a separate background layer using the background property. Here's an example:

In this code:

• We have a .element class with a specified width and height. You can adjust these dimensions as needed for your design.
• We use the background property to apply two linear gradients as background layers. The first gradient represents Layer 1 (red), and the second gradient represents Layer 2 (blue).
• We use the background-size property to specify that each gradient should cover 100% of the width and 50% of the height, ensuring both colors are visible.
• We also added top and bottom keywords to specify that the red gradient should be at the top, and the blue gradient should be at the bottom of the element.

You can place this HTML and CSS code in an HTML file and adjust the .element class as needed to apply this background to your desired element.

How Do I Add Multiple Background Images in HTML CSS?

To add multiple background images in HTML and CSS, you can use the background property with image URLs, just like we did in the previous example. Here's a more detailed example:

In this code, we have applied two background images to the .element class. Layer 1 uses 1st background image, centered both horizontally and vertically with no repetition. Layer 2 uses 2nd background image, positioned at the top left corner with no repetition.

You can add as many background images as needed, and CSS will render them in the specified order, creating a layered effect.

Can Background Images Be Repeated in CSS?

Yes, background images can be repeated in CSS, but you can control the repetition behavior using the background-repeat property. By default, background images repeat both vertically and horizontally. However, you can change this behavior to create various effects.

Here are the possible values for the background-repeat property:

• repeat: This is the default behavior and causes the background image to repeat both vertically and horizontally.
• repeat-x: The background image repeats only horizontally.
• repeat-y: The background image repeats only vertically.
• no-repeat: The background image does not repeat in either direction.

Let's illustrate this with an example:

.element {
  background:
    url('background-image.jpg') repeat,     /* Layer 1 - Repeats both ways */
    url('pattern-image.jpg') repeat-x;     /* Layer 2 - Repeats horizontally only */
}

In this code, Layer 1 uses background-image.jpg with repeat, causing it to repeat both vertically and horizontally. Layer 2 uses pattern-image.jpg with repeat-x, making it repeat horizontally but not vertically.

By controlling background image repetition, you can achieve precise design results.

Combining Multiple Backgrounds for Creative Design

One of the most exciting aspects of CSS multiple backgrounds is the ability to combine them creatively to achieve unique design effects. By adjusting the order, positioning, and repetition of background layers, you can create visually stunning elements.

Let's explore a few creative examples:

Example 1: Overlay Text on an Image

In this example, Layer 1 is a background image, and Layer 2 is a semi-transparent overlay. This combination allows you to display text on top of the image while maintaining readability.

Example 2: Parallax Scrolling Effect

• The .element class represents the container with a fixed background image (Layer 1) and a gradient overlay (Layer 2).

• The ::before pseudo-element is used to create the gradient overlay. It covers the entire container and enhances readability.

• The .content class represents the actual content inside the .element container. It has padding to create space for the content and is positioned above the gradient overlay using a higher z-index.

With this code, you'll achieve a parallax scrolling effect with a fixed background image and a gradient overlay to enhance readability. The content inside the .element container will be displayed on top of the overlay.

Conclusion

CSS multiple backgrounds are a powerful tool for web designers and developers. By combining background colors and images, controlling repetition, and experimenting with layering, you can create visually appealing and dynamic web elements. Understanding how to use multiple backgrounds effectively can take your web design skills to the next level, allowing you to create stunning and engaging user experiences.

Connect with me on twitter

Comments

[Chris Burks]

Good article and thank you for sharing. However, including some rendered examples would have made this post even better.
I know I could take the code and test myself but I don't think I would capture the same concept of what was in your mind when you wrote this.
Again, I very much appreciate the post and will try these techniques.

[Joan Ayebola]

Thank you all for the feedbacks, I'll include examples in the article

[Matthew]

Nice article, agree with others that a link to something like Codepen would be beneficial!