2

I am building an app that requires a full page background image. I am using Angular JS and CSS3 for the background image.

On page load, the <body back-img> custom directive is hit and runs the following code:

var grindModule = angular.module('grindApp', ['ngRoute'])
grindModule.directive('backImg', function(){
    return function(scope, element, attrs){
    var url = ['./../static/images/pushup.jpg', './../static/images/work.jpg']
    var idx = Math.floor(Math.random() * url.length)
    element.css({
        'background': 'url(' + url[idx] +') no-repeat center center fixed',
        'background-size' : 'cover'
    });
};

A random index is generated and then is used to get a random image url from the array that stores them. It then places said url in the following piece of codebackground: url().

Once the page loads the page looks like this:

Image

Notice the black white space at the bottom of the screenshot. I don't want this. This background is working on all devices except this particular phone (that I know of). This bug is only generated when I am using the mobile version of the Chrome browser. It does not happen when I use the mobile Firefox browser. Seems to be Chrome specific, but I could be very wrong.

Here is all of my code if you feel like that could help you: Grind Github.

halfer
  • 19,824
  • 17
  • 99
  • 186
Erik Åsland
  • 9,542
  • 10
  • 30
  • 58

2 Answers2

3

I had a look at your website.

This is my train of thought:

1) The browser on that mobile could be outdated and is not supporting the "cover" property correctly. But the issue with this is that you've added "center center" as the background position, so, at the worst, the browser -should- be displaying that image aligned at the center of the page by it's center at full scale, which it is not.

2) The fact that the image is not even centered, makes me think that the "body" element is somehow not functioning properly with a height set at 100%. Try adding height 100% to your HTML tag as well.

html,body {
    height: 100%;
}

3) If #2 didn't fix it, then I would try and add another element into the page, just after the starting <body> tag like this:

<div class="bg-fullpage-wrapper"></div>

The style for this element should be:

div.bg-fullpage-wrapper {
    /* Your current background stuff here ie:
    background: url("./../static/images/work.jpg") 50% 50% / cover no-repeat fixed;
    */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

Remove the height 100% from body tag for this attempt. You'll have to fix z-index of elements when you do it like this.

4) If this DIV doesn't make it work, then I would probably start thinking in terms of browser resources running out etc since the images that seem to load up for me are massive for web format, there might be issues with downscaling from/to that resolution.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Aaron
  • 394
  • 2
  • 8
  • 1
    Was able to reproduce the issue myself, making html have full height does indeed fix the problem. I'd suggest min-height 100% though, I've experienced weird things with just height 100%. Oh, and OP, Aaron's 3rd fix is commonly known as a "Clearfix." http://stackoverflow.com/questions/8554043/what-is-clearfix – Kevin Feb 25 '16 at 02:07
  • Ahhh thanks for the clarifications Kevin, I didn't know it had a term :). Hah! learn something new every day. Cheers – Aaron Feb 25 '16 at 08:16
  • Even the "div" tag with the background in it didn't work? :S – Aaron Mar 01 '16 at 09:39
1

This is a CSS issue, not a JS issue. Outside of that, however, I have no idea what's going on behind the scenes.

head {min-height: 100%}

That's all I know.

Reproduced on an Xperia Z2 with Chrome https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging

Kevin
  • 348
  • 4
  • 13