Geek Answers Handbook

HTML5 / CSS3 - id not working

I am trying to put an image in my body using id div with background image. I don’t understand why the image doesn’t appear when I browse in Google Chrome?

I use almost the same code on my index page and it works great.

HTML:

<body>

<div id="body">

<div id="rainforestimage"></div>

</div>

</body>

CSS

#body {
width:1024px;
height:auto;
background-image:url(../images/background2.png);
margin:0 auto;
background-repeat:no-repeat;
overflow:hidden;
}

#rainforestimage {
background-image:url(../images/exhibits/rainforest.png);
width:1024px;
margin:0 auto;
margin-top:74px;
height:364px;
position:absolute;
z-index:1;
box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
}
+4
source share
5 answers

Yours div#bodyshould have a set height, try setting a height and you will see a background image.

Also your HTML page and image folder must be siblings (same level) in the same directory.

EDIT:

background2.png, , rainforest.png ( ) - ,

position:absolute;
z-index:1;
+1

Div 0 . 100%, top:0 bottom:0.

CSS.

#rainforestimage {
  background-image:url(../images/exhibits/rainforest.png);
  width:1024px;
  margin:0 auto;
  margin-top:74px;
  height:364px;
  position:absolute;
  z-index:1;
  box-shadow: 0px 8px 12px -4px rgba(0,0,0,0.46);
  height:100%;
  top:0;
  bottom:0;
}
0

, . CSS

#body {
width:1024px;
height:200px;
}

https://jsfiddle.net/neerajsonar/72wr5n7u/

, .

0

#body #rainforestimage, #body height:auto, div #rainforestimage #body, , #rainforestimage div, . , height div #body width #rainforestimage, .

. , z-index, , position.

0

min-height div #body. #body , #rainforestimage, , .

#body {
  min-height:364px;
}
0
source

More articles:


All Articles