Quick Tip: Using Images as Fullscreen Faux-Gradient Backgrounds

In this Quick Tip I'll show you how to create a nice looking gradient background, using any image and a couple of lines of CSS. What's more, I'll talk about performance and explain the background-attachment property as we go along.

So… What's This About?

We're living in a world where the web (understandably) favors CSS and browser-generated visuals over images. Images have limited resolution, which makes them pretty inflexible. They can also impact a website's performance, costing more server requests plus bandwidth.

Sometimes though, we can lean on images to give us nice visuals. They don't have to be huge in terms of filesize or resolution and the effect won't be greatly compromised even on hi-res and retina displays. Let's have a look at using an image (instead of CSS) for a gradient background.

Step 1: Find an Image

If you want to use, modify or share images, without shelling out hard-earned dollars, you can always rely on Google Advanced Image Search. On the bottom of the page, you can select which type of usage rights you want to search. In this case I will use image which can be shared, modified and is free to use.

Step 2: Create a Document

Open up Photoshop and create a new file. Set width to 300px, height to 300px and the resolution to 72 PPI.

Step 3: Import and Scale Image

Now import the image that you want to modify as a gradient background, and scale it proportionally to fit the canvas size.

Step 4: Applying a Gradient

To get a cool looking gradient, click on Filter > Blur > Gaussian Blur, and set it to 40 (in your case, you can increase or decrease the number depending on your image). That's it.

If you're feeling lazy, you can also take a look at 100 Free Blurry Textures on pepsized.com.

Step 5: Saving for Web

After completing those first steps, it's time to save our gradient background, and to reduce size as much as we can, whilst retaining reasonable quality. Click on File > Save For Web, and set the image format to JPEG.

Now for the compression. When altering the quality (Maximum, Very High etc) you'll see a preview of the final result. Go as low as you can, fine-tune by typing in the actual value in the quality field (80 in this case) and set Blur to 2. Increasing the blur will shave a bit more from the filesize and further soften any pixelation you have.

Check "Progressive". This influences how the image is loaded into the browser. Progressive loading means that it will be loaded in several passes; it first loads completely in low quality, then a bit higher, then a bit higher, instead of loading line by line.

Click "Save" to save your gradient image. At the bottom left of the window, you'll see how low you've managed to get your image size.

Quick tip (within a quick tip): Save your preset for further use

Once you've settled on the settings you find suitable, why not save those settings for quick access in the future? Before you hit "Save", click the little menu icon in the top right of the Save For Web dialog, and click "Save Settings".

Step 6: CSS

Even though we've created a small image, owing to its blurry nature it can be effectively stretched across much larger resolutions without visibly reducing the quality. To load this image on your website background use this little CSS snippet:


body{
	margin: 0;
	background: url('img/bg.jpg');
	background-size: 100% 100%;
	background-attachment: fixed;
}

Explanation:

margin: 0 - This may not be necessary if you've properly reset your CSS to begin with. It removes whitespace around your image, or edges in the viewpoint of your browser.
background: url('bg.jpg') - Path to your background image. Set the path within the url('').
background-size: 100% 100%; - This adjusts the width and height of your background image. The first value is width, the second one is height. The reason I've chosen percentage system is because it remains the same relative size to the viewport on every device depending on the value you've set. 100% will fill the viewport of whatever browser.
background-attachment: fixed - Using this property we can specify if the background is going to be scrollable or fixed. In our case, we want our background to be fixed; it won't scroll with the content. I will talk about this property in more depth below.

Reduce HTTP Requests

One downside to using images is that pulling each one into the browser adds an extra server request. The amount of parallel requests one can make is limited, so bottle-necking can occur in cases where lots of assets are being downloaded. To get round this, it's possible to convert your image to Base-64 and insert it directly into your CSS file using a Data-URI.

There are plenty of services which perform this task for you, but the self-proclaimed "super simple dataURI tool" duri.me is dead easy to use.

For more information on how this works, check out Chris Brown's introduction Data URIs.

Final Result

Take a look at our little 300px image, stretched across the whole viewport. You can check out the live demo too.

About `background-attachment`

The background-attachment property is mostly used to specify whether background images should scroll or be fixed relative to their parent element.

We've used it in its simplest form:


		body {
			background-image: url("img/imgname.png");
			background-attachment: fixed;
		}

It also supports multiple background images, accepting multiple comma-separated values itself. In this example the first background image ("image1.png") will scroll, the second ("image2.png") will be fixed:


		body {
			background-image: url("image1.png"), url("image2.png");
			background-attachment: scroll, fixed;
    	}

Take a look at the demo.

Conclusion

This is a simple way to achieve cool-looking gradients as a fresh website background, in minutes. Don't forget to weigh up whether you think it's worth using CSS gradients instead, but I hope you liked this tutorial - thanks for reading!

Further Resources

Quick Tip: Understanding CSS3 Gradients on Nettuts+
The What, Why and How of Data URIs in Web Design on Webdesigntuts+
duri.me a super simple dataURI tool
100 Free Blurry Textures on pepsized.com