Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

CSS3 vs. Photoshop: Complex Backgrounds

Length:MediumLanguages:
This post is part of a series called CSS3 vs. Photoshop.
CSS3 vs. Photoshop: Rounded Corners and Box Shadows

This tutorial will outline how to create complex backgrounds which, in the past, could only be achieved by slicing up a design created in Photoshop or another graphic editor. We're going to look at how to use gradient shades and how to combine them with multiple image backgrounds to create radical effects. Are you ready?

Before Getting Started

This is the first in what will be a series of many examples. Each one will harness CSS3 to achieve visual effects which have traditionally relied on creating images in Photoshop before slicing them up and porting to a web design. This cross-process has created a gap between programmers and designers and slicing a design can sometimes be a very awkward task. The limitations of CSS have made creating something as simple as an angled or oblique gradient impossible. But now, thanks to CSS3, our imagination is the only limit.

Today we will use the multiple backgrounds feature of CSS3 to create a nice, calm landscape from a single div.

Note: All the examples were tested on Mozilla Firefox, Safari and Chrome, if you want to achieve something similar in IE or any other browser leave a comment and I will be glad to help you.

In the past there was only one way to create a gradient background: using Photoshop (or any other graphic editing software). We would follow this process, for instance, for a full page background: Create a Gradient Fill Layer (or apply a Gradient Overlay effect to a box) and set at least two Paint Buckets as stop colors. Then using the Crop or Slice Tool, cut a 1px width image and repeat it using CSS depending on the case, horizontally or vertically. A fairly reasonable process, pretty quick, and almost mechanic for experienced web designers. This process, however, has a couple of limitations:

• Any image represents a request to a server processor. The loading time is proportional to the number of HTTP requests to our web server, so having multiple images would likely result in some kind of lag loading the page.
• You could only create horizontal or vertical gradients, an oblique gradient, or a radial gradient (very common in print design) was impossible to achieve with a repeating image. Large image backgrounds started being used with high broadband, but the loading time was obviously affected.

In Photoshop you used to have something like this. You can select a Stop Color from a visual color picker or write both RGB or HEX values. This is pretty much the same as CSS3; you can use Hex or RGB colors for the gradients. In future tips I will show you how to use the RGBA colors to add an Alpha (transparency) percentage.

With CSS3, creating an classic linear background needs a couple more lines of code than using a background image, but the result is worth it. This is the proper syntax to create a gradient with css:

Syntax -moz (view full)

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 

Syntax -webkit (view full)

-webkit-gradient(linear, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

A important thing to point out is that the gradient is considered a "background-image". In this example we assign a class to our document's body:

The CSS then targets that class:

In graphic software you can set several variants of gradient shapes by changing the number of stop colors, angles, and style (linear/radial).

In CSS3 we can achieve the same results.

Syntax -moz (view full)

LINEAR: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Syntax -webkit (view full)

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

View Demo

Step 3: Background Images

Obviously, we will not always need only gradients as backgrounds, having elaborate images is still something we'll lean on. CSS3 allows us to add several images to the background, then changes sizes and positions aswell.

For a multiple background image you should define two attributes: "background" and "background-size". The first one sets all the images, the urls, its positions and repeat style - the second sets its respective sizes ("auto" by default).

Syntax

background: [<url-1> <xpos> <ypos> <repeat-style>], [<url-2> <xpos> <ypos> <repeat-style>], [<url-3> <xpos> <ypos> <repeat-style>], ... [color] ;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

This is a simple example of having 2 images (a happy and a sad face) as background of a element (class="image"), with different sizes and positions:

View Demo

Step 4: Combining Both

Now that you know how to create linear gradients, and add multiple images, you can combine them all as a complex background for a single div. Starting in photoshop you should have something like the screenshot below: A linear gradient background depicting the horizon and the sky, three clouds (which is actually the same image with different sizes) and a little mountain. Then you just need to slice a single instance of the clouds and the mountain with transparent background, or find some similar stock images that you can use.

Now, let's add everything as a single background for our HTML element.

Step 5: Syntax

background: [<url-1> <xpos> <ypos> <repeat-style>], [<url-2> <xpos> <ypos> <repeat-style>], [<url-3> <xpos> <ypos> <repeat-style>], ... [gradient] ;

background-size:
[<style> || <width-1> <height-1>],
[<style> || <width-2> <height-2>],
[<style> || <width-3> <height-3>],
...
;

In the css file, for the "background" attribute, put the images first and then the gradient with all its respective stop colors. Then for the "background-size" attribute, set the sizes for the images, and leave all the gradient backgrounds' sizes as "auto".

View Demo

Conclusion

And that's it! try to create your own complex background combining gradients and images. Thanks for reading!

.