How to add some CSS image magic to your backgrounds

Alfredo C. — Fri, 05 Jun 2020 19:01:22 +0000

Have you ever struggled with image positioning and backgrounds in HTML and CSS? As a beginner Web Developer one of the things I struggled with a lot was image positioning; whether or not to use any image for a background or make my unique style. Most of the time it depends a lot if you only want to show the image of an article, have a nice background for a section of your page or a text area. While working in different projects and after a lot of practice I found out how powerful the CSS background property can be and how much we can do with it.

We know that backgrounds can have basic values like a simple color, the URL of an image or a linear/radial-gradient, etc.

    div {
    background: #81d4be; /* url(https://image.jpg) *//* linear-gradient(45deg, red, black) */
    }

But it can do much more than that.

For example you can give an image a shading effect with a linear-gradient:

div {
background: linear-gradient(#ddd5, #222b), url(“https://responsive-design.com/images/picture.svg") 50% 50% no-repeat;
}

Or you can add a corner shading effect for a corner image and a shading effect for the grater background image, like they do in the page The Next Web. By adding some simple code like so:

div {
background: url(https://cdn0.tnwcdn.com/wp-content/themes/cyberdelia/assets/img/tnw.svg) 0% 0% no-repeat, linear-gradient(165deg, #f42a, #c096, #9050 55%) 100% 0% no-repeat, linear-gradient(#ddd5, #222b), url(“https://learnsometing.github.io/responsive-design/images/picture.svg") 50% 50% no-repeat;
background-size: 50%, 100% 60%, auto, 120%;
}

Here I mention the attributes of the property, if you need more information about it I will provide some links at the end.

For proper work with the “background” property with more than one value (URL or color), you need to separate each value by a comma. If you want a plain color it needs to be with a gradient. And since gradients need 2 values it will work by repeating the color.

Here is a list of the background possible attributes:
- background-image: url(/image.png) or linear-gradient(#333, #ccc)
- background-position: 0% 0% [in % or px]
- background-size: auto auto [can be % or px for x and y or just x]
- background-repeat: repeat
- background-origin: padding-box
- background-clip: border-box
- background-attachment: scroll
- background-color: transparent

The background property is easier with it’s short hand property, which defines the gradient or attachment with it’s parameters in one line.

The order is as follows:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

It’s very important to know that the order is crucial and the first value set in the background is the first layer on screen, the rest stack to the back. Here are two different examples of this usage of the property:

A simple visual layered box:

div {
background: linear-gradient(#f00,#f00), linear-gradient(#fff,#fff), linear-gradient(#f00,#f00);
background-position: 0% 0%, 50% 50%, 100% 100%;
background-repeat: no-repeat;
background-size: 90% 90%, 85% 85%, 85% 85%;
}

In the above example the background property has 3 linear gradients values with a same full color, red(#f00), white (#fff) and red respectively. The second parameter is the position, defined as x and y value.

It’s important to mention the direct relation of the size of the element on display outcome of all the layers. For this reason on the above example, the div had to have a width and height defined at 35px to show a nice small layered square.

I’ll show a last more complex example for this, a square with more layers that gives a stacked like view of a square:

div {
background: linear-gradient(#eee,#eee), linear-gradient(#e00,#e00), linear-gradient(#eee,#eee), linear-gradient(#e00,#e00), linear-gradient(#eee,#eee), linear-gradient(#e00,#e00), linear-gradient(#eee,#eee);
background-position: 76% 75%, 80% 80%, 67% 65%, 59% 51%, 49% 40%, 42% 26%, 100% 100%;
background-repeat: no-repeat;
background-size: 54% 52%, 60% 60%, 60% 61%, 60% 60%, 60% 62%, 60% 60%, 100% 100%;
}

Here we have 7 values in the background property to have view of a front frame and 2 red shades to the back. To achieve this the colors in the shades are in the following order: gray(1st-Layer), red, gray, red, gray, red, gray(Background-Layer).

“The possibilities are endless and the limit is your imagination”

I leave you here with an amazing work of art that inspired me to extract as much as possible from the tools at our hand, it’s made with CSS and one HTML element. You can find it on the Codepen webpage, do check it out. The name is Pure CSS Single Div Up House!, author: Patricia Masaglia.

If you need more info on the background and more CSS properties the CSS-tricks site is a great source. Code on!

DEV Community: Alfredo C.

How to add some CSS image magic to your backgrounds