CSS Multiple Backgrounds
Tags: webdev, css, tutorial, beginners
Published: 2023-09-09 16:41:08

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:

```css
.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.
{%codepen https://codepen.io/manabox/pen/nQVdMJ %}

## 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:

{%codepen https://codepen.io/joanayebola/pen/yLGzVPV %}

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:

{%codepen https://codepen.io/joanayebola/pen/zYyEomR %}

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:

```css
.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

{%codepen https://codepen.io/joanayebola/pen/mdaBOvN %}

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

{%codepen https://codepen.io/joanayebola/pen/wvRrobM %}


- 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 <a href="https://twitter.com/codesbyjojo?t=4bmt0hE6ZpBQBeLzGsUQCg&s=09">twitter</a>