header

Summary:

Semi-Transparent .png Background in HTML

    ●   Text shows up better and is easier to read when it's behind a semi-transparent background.


Learn About:

Learn Opacity in Photoshop.png format in-line css code

•   This tutorial is part of the Fan-Tasitic Project.

Other People's Work:

This background is an example of work inspired by this tutorial.


Step #1: Open PhotoShop ~

Hopefully you've done this tutorial first but if not, it's ok.

Open PhotoShop & create a new canvas. Hit the keyboard shortcut: Cmd (⌘) + N cmd key + n key or go to: File > New

Set the Width and Height to approximately 10x10 pixels - VERY SMALL!

width and height


Step #2: Fill with Color ~

Fill the square with the white by going to: Edit > Fill

edit fill white

… and fill the square with color.

white


Step #3: Lower the Opacity ~

Open Layers by hitting F7 (if it's not open already) and drag the Opacity slider down a little.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Set it to approximately 40 percent for starters.

You may need to change that later …


Step #4: Save as .png-24 ~

Then go to: File > Save for Web … … and save the document as a transparent_bakgrnd.png IN THE ROOT FOLDER OF THE PROJECT.


Step #5: Find the div ~

Look for the <div> </div> tags surrounding your content that you added from this tutorial


Add this code to the end of the string …


… then finally, add the name of the semi-transparent .png file you just made.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #6: View your Work ~

Save your work and view it again in your browser. It might look something like this:


Step #7: Compress your Folder ~

Now all you have to do is Right-Click the root folder of your site, compress it and attach it.

right click root folder


Last Step: Save and Attach ~

Attach the .zip file with the completed links …

zip file

Once you've sent the .zip file, you can delete it. It's of no further use.