3

CSS Challenge:

This CSS gets my background to fill 100% of the screen height but there is a minor problem - when you scroll down there is initially white space, then when you release your finger and stop scrolling the background image "adjusts" and fills 100% of the screen height again. The problem does not re-occur on the same page if you continue to scroll, just the first time.

<body>
  <div class="background"></div>
  <div class="content"></div>
</body>

and the CSS:

html{
     height:100%;
    }
.background{
     position: fixed;
     z-index: 0;
     width: 100%;
     height: 100%;
     background-image: url('../image/backgroundpicture.jpg');
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position: 50% 10%; 
    }
.content{
     width:100%;
     height:200px;
     position:relative;
     z-index:1;
     top:1800px;
     }

The Problem is there too, when I put the background-image in the Body!

Cœur
  • 37,241
  • 25
  • 195
  • 267
felixgerlach
  • 17
  • 2
  • 7
  • I see no problem with it, also this isn't really a "challenge". What browser etc are you using. Just read at the end of the title you have "mobile", I have tried this on IOS and found that position: fixed does what you are describing. No work around that I know of. – Ruddy May 21 '14 at 07:50
  • The Problem appears on Samsung S3 in the Chrome Browser. Here is a Mockup Of the Problem in IOS: http://www.directupload.net/file/d/3629/m8vaw8ii_png.htm http://www.directupload.net/file/d/3629/mg8n7a36_png.htm – felixgerlach May 21 '14 at 08:02
  • Like I said, I think its a problem with mobile browsers. They don't seem to agree with position: fixed. Let me know if you find a work around, be interesting to know. – Ruddy May 21 '14 at 08:15

4 Answers4

2

This is (FINALLY) solved due to changes in how Chrome for Android and iOS Safari work! Have to use 100vh for the height and it will function exactly as expected.

https://developers.google.com/web/updates/2016/12/url-bar-resizing

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('../image/backgroundpicture.jpg');
    background-size: cover;
    z-index: -1;
}

Should be all you need!

addMitt
  • 951
  • 2
  • 13
  • 27
1

Could be wrong, this question is a little unclear. By default there will be white space which can be removed with this snippet taken from a CSS Reset. Does that help?

CSS

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}

Do you want the background to be underneath all your content? If so, you should just apply it to the body.

CSS

body{
     background: url('http://www.placehold.it/500') fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
    }

Edit - Create an HTML page exactly like this, is there the same problem?

<!DOCTYPE html>
<html>
<head>


<style type="text/css">

html, body, body div {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}    

#background {
         background: url('http://www.placehold.it/500') fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
        }

</style>

</head>

<body>

<div id="background">

<!-- Fill me with content -->

</div>


</body>

</html>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
  • There is the same problem, when i put my background image in the body tag! Here is a Mockup of the Problem: -->directupload.net/file/d/3629/m8vaw8ii_png.htm -->directupload.net/file/d/3629/mg8n7a36_png.htm – felixgerlach May 21 '14 at 08:08
  • Also i want to fix the Background image with position:Fixed. I want only scroll the content div! – felixgerlach May 21 '14 at 08:13
  • My Problem still appears! The viewport of the initial browser is filled with my background image! When i scroll down the address bar hides automatically and the viewport will be bigger. So the background image needs time to resize to the new 100%! – felixgerlach May 21 '14 at 08:34
  • I edited the last snippet of my answer. Try a page exactly like that. I also found the same problem [in this question](http://stackoverflow.com/questions/23299960/prevent-fixed-position-background-image-cover-from-resizing-in-mobile-browsers) – misterManSam May 21 '14 at 08:40
  • I'm the guy who wrote "that" question, haha. I made a page exactly like your last snippet. Unfortunately mobile doesn't like the fixed background image position within the body or something, as it just stretches the image to be the size of the content. I also tried omitting the "background" div and making that a part of the body. The fixed positioning worked (the cover part, not so much), and it still exhibited the same issue with the whitespace appearing when the address bar scrolls up. – addMitt Jun 04 '14 at 16:55
1

Wish that one day someone could work out a solid work around for a viewpoint that changes height...

I have tried a lot of different ideas, and still can't find one that works well.

The best that I have found is to read the (window).height() and add 60px to account for the title bar, and resize the element containing the background to that height..

Its still not the best as 60px will not always be spot on and you are just expanding the background past the smaller viewpoint size..

If there were only a way to get the max-viewpoint size then that would solve everything :(

martyish
  • 31
  • 10
-1
body {
    padding : 0;
    margin : 0;
}

This has to work.

Please take a look at backstretch.js which keeps the image responsive no matter where we open the site whether in a mobile or desktop.

ebarr
  • 7,704
  • 1
  • 29
  • 40
user3610969
  • 91
  • 1
  • 1
  • 5