background color in css not showing up

Question

i have a problem with my background color it's not showing up i want it to be red here's the code https://jsfiddle.net/yPX5Q/22/ 0000

Update: the problem is fixed but i have another ones : when i resize the browser block2 disapears and i want to center the body but the black baground of nav is limited by body any help

Answer 1

There were a couple of things wrong or not taken into account.

Firstly,

background-image:red;

is not a correct css property.

Secondly, using absolute positioning on the internal divs removes them from the flow and so the parent collapses to have no height.

It's not clear why you are using absolute positioning but it's not recommended for general layout.

LearnLayout.com

nav {
  position: relative;
  background-color: red;
}
#block1 {} #block2 {}

<nav>
  <div id="block1">blog d'actualités</div>
  <div id="block2">Acceuil | Contact</div>
</nav>

Answer 2

You need to set a width and height to make it work.

FIDDLE