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.


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.