Div css background-image not showing 100% height

css background height cover

11,540

Solution 1

Set body and html height: 100%

body,html{
    height: 100%;
     margin:0;
}

body{
position:relative;
padding: 0;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

DEMO HERE

IF you want on the full body do this:

body,html{
    height: 100%;
    margin:0;
}

body{
    position:relative;
    padding: 0;
    font-family: "Titillium Web";
    color:#fff;
    width: 100%;
    background-color: #030000;
    background-image: url(http://www.abelabad.com/abad/img/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-attachment: fixed
}

#bg{
    height:100%;
}

DEMO HERE

Solution 2

Thank you

I finally used jQuery

$('#bg').css("height", $(document).height());

11,540

Author by

Abel Abad

Updated on June 04, 2022

Comments

Abel Abad almost 2 years
I don't know why this css is working when I use a backgroung-image on the body tag set to 100% height but it is not showing full height (only showing screen height) when I use it on a div

Here is the code:
```
<body>
   <div id="bg">
   </div>
</body>
```
CSS
```
body{
position:relative;
padding: 0;
overflow-x: hidden;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}
```
I don't want to use background-size:cover please
- Luís P. A. over 9 years
  
  You have a html markup error (extra close div above #bg)
- Abel Abad over 9 years
  
  sorry, I changed it.
Abel Abad over 9 years

Yes, body and html height are already set to 100% but its not working
Luís P. A. over 9 years

Set background-size: auto 100%;
Luís P. A. over 9 years

Ok..Set background-size: 100% auto; and on the body set overflow:hidden; I put an example with a image choose by me, just put your image.
Luís P. A. over 9 years

I made a new update to the demo and remove the overflow on the body and set margin:0 on the body,html
Abel Abad over 9 years

I can't scroll if I set overflow: hidden on the body
Luís P. A. over 9 years

If you want on the all screen you must set the image on the body...wait a minute i will made an example for you
Abel Abad over 9 years

Yes, that is what I did at first, but I want to use parallax so the background image needs to be on a div.