How to layer backgrounds in CSS

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.

Screenshot: flannelfem.me ft. gradient background, notebook paper and noise texture

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!

Lavender #65427E
Weird red #FF4430
Effervescent snot #FFFD89

(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.

cssgradient.io generator

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.

Love this post?

Support me by subscribing to my blog and/or buying me a cuppa:

Leave a comment

Comments on this post

I’m always super impressed by people who have skills in CSS. I have none, and I’m always too nervous to try anything because I worry that I’m going to mess my blog up. It’s great that you give advice like this so people can feel more comfortable trying things out.

Reply to this »

Thanks! I love customizing my site and having cool/fun/magical/etc. features. I think the best way to get started coding is with smaller projects that allow you to mess around, so you can actually feel comfortable with things. I don’t always remember the names of things (selector, property, etc.), but I definitely remember how to bend CSS to my will. I want to share that 🙂

Reply to this »

This is cool! The background of my blog is a really awful brown. There’s something in my blog’s template that screws up the background whenever I try to change it, so I stopped trying.

Reply to this »

I’m unfamiliar with Blogspot template design, but I looked at your site through Firefox’s Inspect Element and the body background selector is wrapped in <style> where the ID is page-skin-1 in multiple instances:

<Variable name="body.background" description="Body Background" type="background"
color="#ffffff" default="#111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center"/>

and again:

/* Content
----------------------------------------------- */
body {
font: normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
color: #000000;
background: #ffffff url(https://2.bp.blogspot.com/-4GcZqqRvoxc/XlAWhKjnyiI/AAAAAAAAPHk/flb3QySZb7k56rNR5JVESeQ0IFk1jOpoQCK4BGAYYCw/s0/Blog%2Bbackground%2BBrown%2B4.jpg) repeat scroll top left;

Below all this is yet another instance of the brown background (<style>body{...}</style>).

Removing all of those finally removed the brown background. Again, I’m unfamiliar with Blogspot template design, so I’m not entirely sure completely deleting the lines is viable, but regardless…I hope this helps point you in the right direction. 😉

Reply to this »