Div Background Color Not Showing with Body Color

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!

body background color not showing?

Comment your Bootstrap include and see if the body is applied. You should try to test with the minimal amount of code first and then add in things.

If that doesn't work, you can use an inspector in Firefox or Chrome to see what CSS effects are applied.

You also may want to use the network inspector in Chrome to determine if your stylesheet is actually even getting downloaded or if the link is incorrect.

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>

background-color not working with body

Two possibilities I can think of are:

1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.

2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.

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

Div Background Color Not Showing with Body Color