Background Color Not Showing for a Div

Background color not showing for a DIV

Set the overflow to auto for #content.

#content {
    width:980px;
    margin:auto; 
    height:auto; 
    background:#fff; 
    overflow:auto;
}

Why does background-color have no effect on this DIV?

Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.

My div background color won't show up

Looks like there are a few things that are probably causing this. First, you have two html tags. second, ID is capitalized (not sure if that would cause any issues), and third you're not using ASCII quotes. “ (character code 8220) is not the same as " (character code 34).

Note that that quote issue most commonly comes from copying from a text editor, like Word. If you look at what you put, you'll see that the ID isn't the only thing with the wrong type of quotes.

Your code with those things fixed works:

#header {  height: 15px;  width: 100px;  background-color: #4A7B6F;  border-radius: 5px;  border: 2px solid #9EAEB3;  margin: auto;}

<!DOCTYPE html><html lang="eng">  <head>    <meta charset="utf-8">    <title>Greg's Page</title>  </head>  <body>    <div ID="header">Hello</div>  </body></html>

Why is the background color of my DIV element not visible?

You need to give your element height.

It helps to simplify the problem. Currently, if you add height: 100px to your row1 class, the background becomes a visible yellowgreen as you desire:

.row1 {
    background: yellowgreen;
    height: 100px;
}

Let's show the difference with a simplified snippet:

.row-1 { background-color: yellowgreen; }
.row-2 {
  height: 100px;
  background-color: red;
}

<div class="row-1"></div>
<div class="row-2"></div>

Div background color not updating

set height and width for your div and test it again!you can use below css.

.wrapper{        position: relative;        margin: 20px;    }    #bottomBar{        width: 100%;        height: 100%;                    position: absolute;        top: 0;        left: 0;        z-index: -40;    }    #percentageText{        position: absolute;        z-index: 9;        margin-top: 37px;        left: 20px;        background-color: red;        height:100px;        width:100%;    }

<div class="wrapper"><div class="ldBar"  data-type="fill"  style="margin: 0 auto;"  id="bottomBar"  data-fill-dir="ltr"  data-path="M10 10 H 790 V 90 H 10 L 10 10 M10 10 A 5 5 0 0 0 10 90 M 790 10 a 5 5 0 0 1 0 80"  data-fill-background="rgba(0, 0, 0, 0.0)"  data-fill="red"></div>      <div id="percentageText"></div></div>

css - div background color not showing

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

CSS background color not showing up?

see the fiddle:

Fiddle: http://jsfiddle.net/uT7Vv/

Demo: http://jsfiddle.net/uT7Vv/embedded/result/

DIV Background color not showing with body color

Following my comment:

Your problem is the div has no content... no width/height... and so the blue color is not displayed.

Use this in the css to avoid the gaps on the edges:

#bg-top {
  background-color: #2390bb;
  position:absolute; 
  top:0;
  left:0;
  width: 100%;
  height: 200px;
}

Plz mark the answer as solution if this has helped you!

Background Color Not Showing for a Div