CODEWITHSUNDEEP
htmlcssweb
user3145320
user3145320

Reputation: 5

Transparent white background

Hi I want to have a white transparent background in a part of my body tag but I have tried some CSS yet its still not working. its not even filling a white background.

Here is my HTML

<!DOCTYPE html>
    <head>
         <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
        <title>Guitar Corner</title>

        <link href="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css" rel="stylesheet" />

         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/jquery-1.7.1.intellisense.js"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/js/bootstrap.js"></script>
    </head>
        <body>
            <div class="container">
                <div style="position:fixed; top:0; left:0; width:100%; height:100%;">
                    <img src="bg2.jpg" alt="logo"/>
                </div>
                <div class="center-block">
                    <div class="col-md-12" style="background-image:url('guitar.png');  background-size: 1200px 350px; background-repeat:no-repeat; shadow: 10px 0px 20px;"> 
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <br>
                        <div class="col-lg-3">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="GC.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222);"/>
                        </div>
                        <div class=".col-xs-12 .col-md-8"><i>
                                <font face="Bebas Neue" color="white" size="150"><br />
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"We are attached by strings."
                                        &nbsp;</i>
                                </font>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                        </div>
                    </div>
                </div>
                <div id="bodycolor">
                    <div class="col-md-12" id="bartonav"><font color="white">
                        <h1>HOME</h1>
                    </div>
                    <div class="bodycolor">
                    <div class="col-md-3">
                        <br />
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">PROFILE</a></li>
                            <li><a href="#">ABOUT US</a></li>
                            <li><a href="#">CONTACT US</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

My CSS:

.bodycolor
{
 background-color: white;
}

I have edited and included my whole code here.

Upvotes: 0

Views: 8506

Answers (2)

James Hunt
James Hunt

Reputation: 2528

To make a semi-transparent background, use rgba (to add an alpha value to the background color)

#idName
{
    background-color:rgba(255,255,255,0.5);
}

The 0.5 at the end is the alpha channel, with 0 being transparent and 1 being Opaque.

Here is a JSFiddle showing transparency: JSFiddle

Upvotes: 1

DanIdle
DanIdle

Reputation: 41

    <div class="bodycolor">
                    <div class="col-md-12" id="bartonav"><font color="white">
                        <h1>HOME</h1>
                    </div>
                    <div class="transparent">
                    <div class="col-md-3">
                        <br />
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">PROFILE</a></li>
                            <li><a href="#">ABOUT US</a></li>
                            <li><a href="#">CONTACT US</a></li>
                        </ul>
                    </div>
                    </div>
                </div>
CSS
    .bodycolor
    {
     background-color: #FFF; /*general background color*/
    }
    .transparent
    {
     background-color:rgba(255,255,255,0.5);
    }

Something like this ? Be careful , you're using the same class twice, the two parts will have the same background

Upvotes: 0

Related Questions