One of my favorite things to do in CSS is layer backgrounds — specifically gradients and transparent backgrounds. It reminds me of when I would create digital scrapbook pages in Photoshop, layering various textures to create my own. So when I learned how to do it some years back in CSS, without the need for any photo editing program, I was sold.

Since I get most of my backgrounds from other sites, like Transparent Textures and SVG Backgrounds, layering backgrounds in the CSS allows me to truly make them my own.

Basic background in CSS

Using a plain background may look something like this, sans any shorthand:

body {
 background-color: cornflowerblue;
 background-image: url("image.jpg");
 background-repeat: repeat;
}

background-color denotes a solid color; background-image declares an image; background-repeat determines whether your image should repeat.

With shorthand, it would look like this:

body{
 background:cornflowerblue url("image.jpg");
}

The end result is the same; you’re just condensing the lines and size of the file. By default, images repeat both horizontally and vertically, so we need not include that it should repeat.

Further condensing looks like this:

body{background:cornflowerblue url("image.jpg") repeat}

Supes basic, still the same result.

Multiple backgrounds in CSS

For this example, let’s create the combination of a gradient background, with the dark notebook and food icon transparent textures.

Gradient background

I chose to do a gradient of three different colors, because it’s even more fun!

(If you’re interested in your own interactive color palette, there’s a post for that.)

I often use generators because they remove the guesswork and let me see previews live. You can choose your own colors and decide the direction of which your gradient should go, whether it should be linear or radial.

Below the generator is the code. You can choose to tick the option for maximum compatibility with browsers such as IE6+, but I’m just using the basic code for this example.

background: rgb(101,66,126);
background: linear-gradient(149deg, rgba(101,66,126,1) 0%, rgba(255,68,48,1) 50%, rgba(255,253,137,1) 100%);

Lavender will be the default solid background color, as the RGB (red, green, blue) color value for it is rgb(101,66,126). RGB color values use three numbers.

The RGBA color values identify the RGB color value, as well as an alphanumeric value for the opacity.

I also enjoy playing around with background color opacity, as I can create containers where the backgrounds are opaque, but everything else is not. 😏

Textures

Transparent Textures is another generator, allowing you to choose one color and one texture. You should definitely download and personally host whatever texture you decide to use. For this example, I am leaving it as-is.

The codes come out looking something like this:

background-color: #f00800;
background-image: url("https://www.transparenttextures.com/patterns/food.png");

Since we already have a gradient, we just need the background image.

Putting it all together

The comma (,) basically means “and” in CSS; it separates different things.

Additionally, what you put first is what is on top. I like adding textures to create softness, typically above a harder SVG background. Since the triple gradient is solid color and has no transparency, it must be last.

You are literally layering backgrounds here.

Our backgrounds will layer as follows:

1. food icons
2. dark notebook
3. triple gradient

The triple gradient is treated like one whole background, for it is linear-gradient(), a CSS function.

body{
 background: rgb(101,66,126);
 background-image:
  url("https://www.transparenttextures.com/patterns/food.png"),
  url("https://www.transparenttextures.com/patterns/notebook-dark.png"),
  linear-gradient(149deg, rgba(101,66,126,1) 0%, rgba(255,68,48,1) 50%, rgba(255,253,137,1) 100%);
}

Other background properties

So we did not in this example, but in the case of flannelfem.me, the gradient is an SVG background that consumes the screen; it must not repeat. The two textures, however, must repeat.

The background-size property is also different for the SVG background (cover).

background-repeat:repeat, repeat, no-repeat;
background-attachment: fixed;
background-size: auto, auto, cover;

What this means:

• background-repeat = first two backgrounds repeat; gradient does not
• background-attachment = all backgrounds are fixed
• background-size = texture background sizes are automatically decided, the SVG gradient will cover the page

Again, the comma works as “and”. If you need to separate them by line as I did for the background-image property, you may.

background-repeat:
 repeat, /* first */
 repeat, /* second */
 no-repeat; /* last */
background-attachment: fixed;
background-size:
 auto, /* first */
 auto, /* second */
 cover; /* last */

If a property shares values with all the images, you need only give it one value — hence background-attachment: fixed.

End result

I created a CodePen account just for this (and future things). 😅 You can see it and play around with it.~

With the right combination of backgrounds, you can create ✨magic✨ with CSS. Layering backgrounds in CSS works especially well if you find several textures you like, but don’t want to bother with creating your own seamless pattern in a photo editor and/or don’t even have the proper tools.

Personally, I love the ability to create with CSS today what you once had to use JavaScript for. ✨

This post is linked up to the 2021 Book Blogger Discussion Challenge hosted by Feed Your Fiction Addiction and It Starts at Midnight.