CSS Header in Dreamweaver

    ●   Make a Gradient Background for your header using only CSS.

    ●   Then find an image you can use in your header, modify it in Photoshop, and float it left or right.

Learn About:

CSS GradientsFloats Filters in Photoshop

  •   This tutorial is part of the Home Sweet Home Portfolio and What in the World? Web Design Projects.



Other People's Work:

Here are examples of work inspired by this tutorial.

Julia's Portfolio

Maria's Portfolio


Step #1: Open your Styles Sheet in Dreamweaver ~

Open your Style sheet …

… scroll down to the bottom of your CSS code and click there.

Step #2: Create a New Style ~

Create a class called .header-box by typing the following:

Step #3: Border Width ~

Copy this code …

    background: radial-gradient(#03F, #000);
	background: -webkit-radial-gradient(#03F, #000);
	background: -moz-radial-gradient(#03F, #000);
	background: -ms-radial-gradient(#03F, #000);

… and paste it here:

Step #4: Add the Class to your # div ~

Change the color to match your theme.

Step #5: Hex Code Colors ~

Go to: and pick a color …

OR - if you chose your colors in the Kuler Colors , open it and find the Swatches panel …

Step #6: Change your Colors ~

… change the Hex code numbers and replace the gradient colors to match your theme.

Step #7: Find a Picture you can Use in your Project ~

Find something you can USE IN YOUR PROJECT:


… if you're working on your portfolio open a picture of your face …






… OR, if you're making a map, find an image that represents your destination, like the Eiffel Tower, the Sydney Opera House or something that would look good on your map…

… whatever project you're working on, open the image in Photoshop

Step #8: Where You Gonna Put It?

Now Think: WHERE IS THE IMAGE GOING? In your header:

So it has to be a certain size, right? How tall is your header? Go check it:

Step #9: Crop Tool ~

So get the Crop Tool or hit the keyboard shortcut letter (c) …

… and crop your image so it fits inside your header.

If you're working on your portfolio project, crop your face so it will fit inside your header.

Step #10: Lasso Around your Image ~

Get the Lasso Tool or hit the keyboard shortcut letter (L) …

… and trace around your image.

You can use also use the Magnetic Lasso Tool:

Step #11: Feathering

Go to: Select » Modify » Feather and set the Feather Radius to whatever works for you …



You don't have to use 25! If you're not sure what the Feather Radius should be, just try it and see.


You can always undo it and try again …


Step #12: Select Inverse

Now select the inverse by going to:  Select > Inverse or hitting: + shift key+ I.

Then hit Delete delete key and the feathered area should disappear leaving a smooth transition between the two images.

Step #13: Poster Edges Filter ~

Go to: Filter > Filter Gallery

… go to: Artistic » Poster Edges.

Step #14: Contrast ~

Try going to: Image > Adjustments > Brightness/Contrast and change the Brightness Value and the Contrast until you get something you like.

Step #15: Save the Image as a .png ~

Then go to: File > Save for Web … and change the document format as png-24

Step #16: Root Folder ~

Hit Save and put the file in the root folder of your project …

Step #17: Open your header Tag in CSS~

Click inside the header box …

body tag

… and go to: Image > Insert …

… and locate the image you saved in your root folder.

Then type a short description of the image …

Step #18: In-Line CSS ~

Click inside the closing /> tag of the image.

Step #19: In-Line CSS ~

Type    s   t   y    and watch for the code hints to pop up …

… so it looks like this:

Step #20: Float ~

Click between the parentheses and type the letter f to bring up the code hints again select float …

… select left or right depending on which side of the div you want your image.

Float the image to one side and make room for Text:

81_CSS_text-size_Dw.htm or 56_gradient_text_Dw.htm

Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link …

Other Resources: