Background Image displaying on computer but not displaying on phone

[alalston]

So I programmatically am rendering a background image at the top section of my website using javascript. I know it works because otherwise it would not show a background image on the computer.

JS:

"use strict";
window.onload = function(){
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    var section = document.getElementById("headingSection");
    var floatHeight = document.getElementById("floater");
    switch(true){
        case(width <= 640):
            section.style.backgroundImage = "url('images/handyman-small.jpg')";
            section.style.backgroundRepeat = "no-repeat";
            floatHeight.style.cssText = "height: 30%;";
            break;
        case(width <= 1280):
            section.style.backgroundImage = "url('images/handyman-med.jpg')";
            section.style.backgroundRepeat = "no-repeat";
            break;
        case(width > 1280):
            section.style.backgroundImage = "url('images/handyman-large.jpg')";
            section.style.backgroundRepeat = "no-repeat";
            break;
    }
}

If the JS wasn't working, it wouldn't show up on the computer screen, but it does so I know it's working. So then I thought, ok, I'll create a CSS rule to work around it not showing up on small screens.

@media only screen and (max-device-width: 576px){
    #headingSection{
        background-image: url(../images/handyman-small.jpg);
    }
    #floater{
        height: 30%;
    }
}

I tried the path inside the url with and without quotes. And still it doesn't work.

And before you ask, yes I am sure the path and all my paths in general is correct and capitalization/lowercase is correct. And yes I'm sure all the images are there and in the right place. I have images, css, and js folders in the public_html level. It also shows up on the phone emulators during testing. Just not in production on phones.

This is extremely frustrating because most people look at websites on their phones. If anyone knows any other workarounds or solutions that might work please let me know.

EDIT:

I tried using style tags inside the head of the index.php document and it still didn't work

    <style>@media only screen and (max-device-width: 576px){
    #headingSection{
        background-image: url(images/handyman-small.jpg) !important;
    }
    #floater{
        height: 30% !important;
    }
}</style>

Also tried important tags. With and without quotes on the URL. I've tried everything. It works on the emulators and the computer.

EDIT 2:

So apparently it comes up on my boss's phone and my friends phone. Just not mine. Guess it's a samsung galaxy issue.

[PL281 · Accepted solution]

@alalston 

Glad to see you've limited this to your phone ...

1) Your code looks fine - It could have something to do with samsung blocking something with the script

2) Why not just put this all in the CSS vs in the javascript - this way if you are on the desktop and re-size your screen it should load the correct header

[JMPepper · Accepted solution]

Hi @alalston ,

Good suggestion by @PL281 .  As you seem a pretty advanced programmer, here is a tool you might find useful particularly as you are testing on multiple browsers and platforms.  I've often thought I had perfectly good code only to have a problem be very browser specific.

http://browsershots.org/

Hopes this helps,

James

[alalston]

It turns out it's a chrome specific issue on my phone. I downloaded firefox on my phone and it renders fine. I'm not sure why its only not working on my chrome browser on my phone, as I've confirmed with several friends who have both Android and Apple devices that it renders find with chrome on their phones. Regardless, as long as it works everywhere else I'm fine with that.

[RachelM]

Thanks @alalston for letting us know what you found out! It'll be helpful for other community members who might be having the same issue. Take care and hope to see more of you in the GoDaddy Community!

Rachel