Final Result

This tutorial will teach you how to set a web page on fire with Photoshop and CSS.  Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect.  If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall.  Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds.  You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog.  Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step.  To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it.  We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it.  If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top.  Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top.  Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection.  This will make the texture fade out like below:

Our fire texture is now complete.  Press Ctrl + S to save the image to your hard drive.  While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial.  Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fire Page</title>
 <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 <body>
 </body>
</html>

All this is doing is setting up the page with all of the necessary tags that every HTML page has.  The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

<div id="fire"></div>

This one line is all we need to set up the fire effect.  The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the <div id=”fire”></div> line.  I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum.  Then I copied the paragraphs into my HTML file and wrapped each one in <p> tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it.  Not much, but the fun is just beginning…

Step 7

Now create a new text file.  This will be the CSS file that styles index.html.  Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white.  This will make our fire texture really stand out from the rest of the page.  After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before.  Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page.  The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result.  Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it.  It’s a very versitile effect that you can use for lots of different effects.

Enjoy!