Menu
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
552
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
52
Thank you
I finally used jQuery
$('#bg').css("height", $(document).height());
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With