Semi-Transparent .png Background in Photoshop

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

Learn About:

Learn Opacity in Photoshop.png format css code

•   This tutorial is part of the Art Genre and What in the World? Projects.

Other People's Work:

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

Step #1: Open PhotoShop ~

Create a new document by hitting the keyboard shortcut: Cmd(⌘)+N.

Set the Width and Height to approximately 10x10 pixels.

Step #2: Fill with Color ~

Fill the square with the color of your choice.


Step #3: Lower the Opacity ~

Open Layers by hitting F7 (if it's not open already).

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-24 IN THE ROOT FOLDER OF THE PROJECT.

Step #5: Insert it as a Repeating Backround ~

Open the CSS Panel of Dreamweaver and double-click the #container div or #content div wherever you need a semi-transparent background.

content div

Click on Background and attach the semi-transparent .png file.

trans background

Step #6: View your Work ~

Hit F12 or select small to view your work.


If you like what you see, you might want to turn off the background colors for your other divs …

background color none


Last Step: Save and Upload your site ~

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