CODEWITHSUNDEEP
htmlcss
JavaCake
JavaCake

Reputation: 4115

Fullscreen image in background is resizing incorrectly on iOS with overflow

I am building a onepage site with mobile first functionality, but i am experiencing problems with fullscreen images on low-res screens, such as smartphones etc. I have made a rather extreme example, which obviously overflows on even big screens, but hopefully it will make sense what i am trying to do.

I would like the background to be able to extend in the height so it actually fills the screen, which is not the case. Perhaps a misuse of cover?

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/

Upvotes: 3

Views: 113

Answers (1)

Louis F&#233;at
Louis F&#233;at

Reputation: 481

Remove the background- styling from .slider_images as it is unnecessary.

Add position: fixed to the .slider_images img rules.

http://jsfiddle.net/louis_feat/5yth09vk/8/

UPDATE: To include an overlay over the image, include it within the .slider_images div which you should set as position: fixed with z-index: -1

Example: http://jsfiddle.net/louis_feat/5yth09vk/12/

Upvotes: 1

Related Questions