Semi-Transparent .png Background in HTML
● Text shows up better and is easier to read when it's behind a semi-transparent background.
✓ 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 + or go to: File > New …
✗ Set the Width and Height to approximately 10x10 pixels - VERY SMALL!
Step #2: Fill with Color ~
✗ Fill the square with the white by going to: Edit > Fill …
✗ … 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.
✗ 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.
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.
Last Step: Save and Attach ~
✓ Attach the .zip file with the completed links …
✓ Once you've sent the .zip file, you can delete it. It's of no further use.