Ash Blue Web Design

CSS Grain Background Tutorial

Recently I created a website to organize and plan my upcoming wedding. When doing so it quickly became apparent that a visual shortcoming was the background. Although I used a grain based background (which is very popular right now) it still seemed too plain. To make things more interesting I added a transparent radial gradient on top of the repeated grain background. You can see a demo of the finished product at the link below.

Demo

For this tutorial there are a few steps you’ll need to follow. Here is a quick outline.

1. Create the grain image
2. Create radial glow
3. Code everything into your website

Create the grain image

Believe it or not this is the easiest part of the tutorial. Open up Photoshop and create a new item by hitting Ctrl + N. Lets make our new image 1000 x 1000 pixels so we can get a good view of the grain background.

Choose your preferred background color and choose the gradient tool by hitting g on your keyboard. Fill the background with the color we just selected. For this demo I used #eaeaea because of its good contrast with black. To create some grain magic simply select Filter -> Texture -> Grain. You’ll want to set your settings something similar to Intensity -> 10, Contrast -> 41, and Grain Type -> Soft.

To get more control over the grain on the page choose Layer -> New Adjustment Layer -> Threshold. The point here is that we’re going to just select the grain so we can manipulate it to our preferences.

Lets grab our magic wand by hitting w on the keyboard. Make sure your wand has a tolerance of 32 and the New Selection option on. Once its setup, click on the white area of the threshold layer and then hit ctrl + shift + i to only select the grain.

Hide the threshold layer. Hit shift + ctrl + n to create a new layer on top. Create a vector mask choosing “Add Layer Mask” at the bottom of the layers panel (see image below). Fill the layer with a slightly darker color (for this demo I used #c9c9c9).

To quickly adjust the grain on the fly and tweak it go to Layer -> New Adjustment Layer -> Exposure. Adjusting the offset will help you tweak things to where they need to be. This is really nice because you can tweak the grain background quickly with little trouble. Lets save things so we can just adjust the exposure if we need to tweak it later. Here is the result of my tweaking below with just a little bit of offset.

Create the transparent glow

Create a new layer again by hitting shift + ctrl + n and place it on top. Set your main color to white (#ffffff) and choose the gradient tool (hit g on your keyboard). You’ll want a foreground to transparent for your gradient. Make sure your gradient is set to radial.

Create a radial gradient on our new layer towards the middle (we’ll move it towards the left later). As a quick note your gradient shouldn’t be larger than your websites container or it may cause your image to crash (makes the background fold in on itself if the image is wider than the container in some situations). Keep it around 900px and you should be fine.

Coding the grain background

Start out by shutting off the gradient, then slicing a big chunk of the grain (around 300px). You can slice images by hitting k on your keyboard and selecting an area to slice. Save it by going to File -> Save for Web & Devices (save the grain slice as a jpg file).

To slice the glow make sure you shut everything off except for the glow. Slice and save it as a png so its transparent. Be careful that you get the corners of the transparent image. If you don’t its going to abruptly end and you won’t notice it until the image is up. I have an example below, but its a little hard to see. If you need help figuring out where the corners end, go to Window -> Info. Your new Info window will tell you if there is an rgb value or its transparent when you hover your mouse anywhere on the image.

To plug in the tiled grain image link it to the html property. Then plug in the transparency through CSS 3′s multiple background property. You can adjust your background through entering in pixel specs for where the background should be. For instance, in the example below I’m moving my image 170 px backwards on the x-axis.

As a quick warning the transparency will move slightly when the browser resizes, but this shouldn’t be an issue. Also make sure you put your transparent images on top. The CSS 3 background property stacks the images from first to last.

html { background: no-repeat -170px 0 url(../images/background_glow.png), 0 0 url(../images/background.jpg) }

Problem is older browsers like Internet Explorer don’t know how to read multiple background images. This will make our pretty background crash >_< To prevent that from happening, add a property that the browser can use right above with our grain background tile. Now new browsers will get the full version and non CSS 3 browsers will get a simpler version.

html { background: 0 0 url(../images/background.jpg) }
html { background: no-repeat -170px 0  url(../images/background_glow.png), 0 0 url(../images/background.jpg) }

Thats it, we’ve created a very impressive tiled background that looks a lot better than what you normally see. This tutorial has many more uses than just grain backgrounds, you can also use it apply the CSS 3 with multiple transparent images on your projects. Currently I am and its been working great.