I want background image fit with the height of the div, there's a way to do that? background-size:cover; fit only with the width and height autoscale (I need the opposite effect).
Thanks.
This question is related to
css
try
.something {
background: url(images/bg.jpg) no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(../images/bg-404.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Try This
_x000D_
_x000D_
body.bg {_x000D_
background-size: cover;_x000D_
background-repeat: no-repeat;_x000D_
min-height: 100vh;_x000D_
background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;_x000D_
-webkit-background-size: cover;_x000D_
-moz-background-size: cover;_x000D_
-o-background-size: cover;_x000D_
}
_x000D_
<body class="bg">_x000D_
_x000D_
_x000D_
_x000D_
</body>
_x000D_
_x000D_
_x000D_
I know this is an old answer but for others searching for this; in your CSS try:
background-size: auto 100%;
I just had the same issue and this helped me:
html {
height: auto;
min-height: 100%;
background-size:cover;
}
Source: Stackoverflow.com