HTML Div Style Transparent Background Color

Updated on 16 Jan 2012,
Published on 02 Jul 2008

Transparent background color value of CSS color property for HTML Div tag is not supported by most of the web browsers and also W3C does not recommend the use of this value for transparent background color of HTML Div tag or any other web page layout setting HTML elements. But mostly HTML page designers seek around the solution for the alternates to set the transparent background of nested div tags having lots of content. So, the easiest way to fix this problem is to use separate CSS classes for outer div elements and nested div elements. When the HTML document page layout structure goes complex it becomes more and more difficult to check the div tags having background color. Coz if there exists any HTML div <div> element assigned with CSS properties like float and background-color then it could leek out the background color to the child elements also. That is why always define a new class in the CSS whenever any new HTML tag is nested inside another so that it could adopt the CSS style properties of outer element and overwrites the common styles. This will solve the two problems first it will enable you to target the HTML div tag or any other tag that will not affect the outer structure and second you can apply or remove the color of background of nested Div element to create the transparent or opaque Div element. Always try, not to use the background color of the nested div <div> tag that renders the transparent div by default.

CSS Div Opacity Examples:

From the following links you can view the live samples of Div Opacity styles using CSS:

Example of HTML nested Div style with Transparent Background Color

<html>
<head>
    <title>HTML Div Transparent</title>
    <style type="text/css">
        .outerDiv {
            background-color: #c0c0c0;
            width: 300px;
            padding: 5px;
        }
        
        .innerDiv {
            border: solid 1px #000000;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv">
            This HTML Div tag is transparent that is why it has the same background color that
            its outer div has.
        </div>
    </div>
</body>
</html>

Above example shows how to create nested HTML Div <div> tag with transparent background that inherits the background color of outer div element. You can also use the CSS opacity filter style property to adjust the alpha opacity of the background color of HTML div tag. Click here to learn about HTML div CSS style opacity.

Output:

Get the output of above discussed code from the following link:

Div Transparent Background

Continue to next tutorial: HTML Div transparency CSS style Opacity to learn CSS Opacity property and its use to set Div background transparency.

1 Responses to "HTML Div Style Transparent Background Color"
Nice, learning how to position a DIV is one of the most basic elements of css.
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email