speech mark


FacebookBYOL TwitterGoogle PlusLinkedinPintrestYouTube
Adobe Certified Instructor

Dreamweaver Logo  Creating a transparent div tag in Dreamweaver

Amazing training done by brilliant trainers







This tutorial will show you how to create a transparent div in Dreamweaver CC.

Note: I’ll create a basic background colour first then add the transparent div over the top.

1. Modify > Page Properties

Page Properites


2. Choose a background colour.
Note: You don’t have to do this step if your working on an existing site. 

Background Color

3. Insert > Div

Insert a div

4. Give the div a name. give the div a name

5. From the CSS Designer panel – click the ‘+’ button in the selectors menu.

6. The selectors name should match your div tag name. With either a ‘.’ or ‘#’ at the front depending if you choose a class or id for your div.

CSS style for div

7. I’ve given my div a height and width.

Size the transparent div

8. Scroll down in your CSS Designer panel until you find the background-color option.

Make the div transparent


9. Choose colour. Make sure you use the RGBa colour options from the bottom of the colour picker box. The ‘a’ of the RGBa represents Alpha. Alpha is another word from transparency!

10. Once you’ve picked a colour use the slider on the far right of the colour box to select a alpha (transparency) setting.

Pick RGBa for transparency


Before Transparency



Finished Transparent Div




If you’ve got any questions please use the comments section below or hit us up on Twitter/Google+/Facebook.



comments powered by Disqus







InDesign training in Sydney





speech mark

“I promise you will leave us with the confidence to apply your new skills effectively in the real world.”

    - Daniel Walter Scott

    - Training Manager & Courseware Author