Fullscreen image in background does not properly resize iOS with overflow
I am building a first mobile site but I am having problems with full screen images on low resolution screens like smartphones etc. I made a rather extreme example, which obviously overflows even on large screens, but hopefully it makes sense what I'm trying to do.
I would like the background to be able to expand in height so that it really fills the screen, which is not the case. Cover abuse perhaps?
CSS
html, body {
height: 100%;
width:100%;
font-size:80px;
}
html {
overflow-y: scroll;
}
.slider_images img {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
visibility: visible;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
overflow: hidden;
}
.slider_images {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: none;
background-position: center center;
background-repeat: no-repeat;
}
HTML:
<div class="slider_images">
<img src="http://st.gdefon.com/wallpapers_original/583543_sneg_holod_portret_2560x1707_www.Gde-Fon.com.jpg" />
</div>
Fiddle: http://jsfiddle.net/5yth09vk/6/
source to share
Remove the style background-
from .slider_images
as it is optional.
Add position: fixed
to rules .slider_images img
.
http://jsfiddle.net/louis_feat/5yth09vk/8/
UPDATE: to enable the overlay on top of the image, include it in a div .slider_images
you should set both position: fixed
withz-index: -1
source to share