css - div background color not showing

Question

I am trying to make the background color of the div: content2 the same as that of div: sidebar. However the background color does not show for content2 but it does for sidebar.

Also i am trying to make the header and footer bars transparent but it does not seem to work.

This is my css code

body {
    background-image: url('background.jpg');
    background-size: 100% 100%;
    padding: 0px 0px 0px 0px;
    font-size: 13px;
    position: relative;
    min-height: 400px;
}
 #footer {
    float: left;
    height: 20px;
    width: 100%;
    border: 1px solid black;
    text-align: center;
    padding: 30px 0px 20px 0px;

    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    box-shadow: 2px 2px 3px #666666;
    -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    position:relative;
    z-index:999;

    //transparency
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
 }
 #content2 { //sign in page
    background-color: #EEE;
    float: left;
    margin: 38px 20px 38px 200px;
    height: 370px;
    width: 550px;
    border: 1px solid black;
    padding: 15px;
    padding-top: 20px;
    font-size: 18px;
 }
 #sidebar {
    background-color: #EEE;
    float: left;
    margin: 38px 200px 38px 20px;
    height: 300px;
    width: 250px;
    border: 1px solid black;
    padding: 15px;
 }
 #menucontainer{
    width: 79.5%;
    text-align: center;

    margin: 0px 0px 0px 0px;
    padding: 6px 6px 4px 270px;
    height: 60px;
    line-height: 25px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    box-shadow: 2px 2px 3px #666666;
    -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    z-index:999;
}
#menu-bar {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
}

And this is my html code

    <div id="menucontainer">
        <ul id="menu-bar">
            menu
        </ul>
    </div>

    <div id="content2">
        content 2
    </div>

    <div id="sidebar">
        side bar
    </div>

    <div id="footer">
        footer
    </div>

</body>

Can anyone please help me with this? Thanks

Answer 1

add opacity in header and footer div #footer and #menucontainer

#menucontainer {
opacity: 0.5;
}

or change in background style code like this

#menucontainer {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(169, 169, 169, 0.8)), to(rgba(124, 124, 124, 0.8)));

background: -moz-linear-gradient(top,  rgba(169, 169, 169, 0.8),  rgba(124, 124, 124, 0.8) ); }

and for background in content 2 add background property in class #content2

#content2 {
float: left;
margin: 38px 20px 38px 200px;
height: 370px;
width: 550px;
border: 1px solid black;
padding: 15px;
padding-top: 20px;
font-size: 18px;
background: #ccc; 
}

and delete those things from your code

//transparency

//sign in page

Answer 2

It's because you used the // to comment a single line in CSS. You can just use the pair /* and */ to comment in CSS. So all the following CSS is discarded. Check this Demo

Answer 3

replace comment "//sign in page" with "/*sign in page */" .

Answer 4

the // is valid only if you are writing and .scss file (sass), that's usually the comment syntax for javascript also. the standard css comment syntax is /* your comment here */

Answer 5

It is working correctly.
But the thing is comments inside style tag should be done through this fashion /* -- */

 <!DOCTYPE html>
 <html>
   <head>  
    <style type="text/css">
     body {
       background-image: url('background.jpg');
       background-size: 100% 100%;
       padding: 0px 0px 0px 0px;
       font-size: 13px;
       position: relative;
       min-height: 400px;
    }
    #footer {
     float: left;
     height: 20px;
     width: 100%;
     border: 1px solid black;
     text-align: center;
     padding: 30px 0px 20px 0px;

     border-radius: 24px;
     -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
     box-shadow: 2px 2px 3px #666666;
     -webkit-box-shadow: 2px 2px 3px #666666;
    -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    position:relative;
    z-index:999;

   /*transparency*/
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
 }
 #content2 { 
    background-color: #EEE;
    float: left;
    margin: 38px 20px 38px 200px;
    height: 370px;
    width: 550px;
    border: 1px solid black;
    padding: 15px;
    padding-top: 20px;
    font-size: 18px;
 }
 #sidebar {
    background-color: #EEE;
    float: left;
    margin: 38px 200px 38px 20px;
    height: 300px;
    width: 250px;
    border: 1px solid black;
    padding: 15px;
 }
 #menucontainer{
   width: 79.5%;
   text-align: center;

   margin: 0px 0px 0px 0px;
   padding: 6px 6px 4px 270px;
   height: 60px;
   line-height: 25px;
   border-radius: 24px;
   -webkit-border-radius: 24px;
   -moz-border-radius: 24px;
   box-shadow: 2px 2px 3px #666666;
   -webkit-box-shadow: 2px 2px 3px #666666;
   -moz-box-shadow: 2px 2px 3px #666666;
    background: #8B8B8B;
    background: linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
    background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
    border: solid 1px #6D6D6D;
    z-index:999;
  }
  #menu-bar {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
    height: 395px;
  }
 </style>
</head>
<body>
    <div id="menucontainer">
    <ul id="menu-bar">
        menu
    </ul>
</div>

<div id="content2">
    content 2
</div>

<div id="sidebar">
    side bar
</div>

<div id="footer">
    footer
</div>

 </body>

  </html>

JS Fiddle: http://jsfiddle.net/zRS84/