Div css background-image not showing 100% height
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
Answer
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;
}
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%;
}