Advertisement
Visuals

Quick Tip: Using Images as Fullscreen Faux-Gradient Backgrounds

by

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

Related Posts
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Computer Skills
    App Training
    Writing Destinations for DropzoneDropzone400
    Dropzone is not just another FTP upload client, but a great utilities platform for processing files and text. Dropzone is a collection of destinations that can have two types of actions: drag and drop action and/or a click action. There are a lot of pre-programmed destinations to use, but you can also write your own destinations in Ruby!Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Web Design
    CMS
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…
  • Code
    Creative Coding
    Customizing the WordPress Admin: The Login ScreenCustomize wordpress admin rachel 400
    The WordPress login screen is well designed - it's clean and simple to interact with and it works well on all screen sizes. But what if you're building a site for a client who wants to display their own logo to users logging in? Or if you have a MultiSite installation and want your users to see your branding when they log in? Luckily, you can customise the way the login screen looks quite easily. For this tutorial I've created a plugin to do this; the advantage of using a plugin is that you can drop it into any WordPress sites you develop and instantly give them some branding.Read More…
  • Code
    Articles
    Web Assets - Tips for Better Organization and PerformanceWeb assets retina preview
    Remember back to when we had to spend a lot of time optimizing our project's assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise of mobile development, we are again back in that same situation. It is extremely important to create well optimized sites, so that we have faster applications, which download less content and respond immediately. Read More…