Help - IPAD background colour or image is not working at all

RRoberts's Avatar

RRoberts

13 Feb, 2015 09:06 PM

Hi

I put the following in the CSS file

body
{
height:100%;
    background-color: #FCFCFC;
    width:100%;
    margin:0 auto;
    padding: 0;
    overflow-x: hidden;
}

But it is not showing at all, I even tried Background-Image - it is not working at either.

Please advise what needs to be done for this??

Thanks

  1. Support Staff 1 Posted by Shaun Sullivan on 13 Feb, 2015 09:16 PM

    Shaun Sullivan's Avatar

    Are you sure it isn't working? That is basically rgb(252, 252, 252) which
    is almost pure white. My guess is your eyes can't discern the difference.

    Save a screen shot and inspect the color in a paint program and you'll see
    it is in fact working.

  2. 2 Posted by RRoberts on 13 Feb, 2015 09:32 PM

    RRoberts's Avatar

    Sorry I mean it should have been black.

    I tried in background-color: #000000;

    But the screen comes back with no colour.

    This is using IPAD Simulator within VS2012.

    Any ideas please?

  3. 3 Posted by RRoberts on 13 Feb, 2015 09:36 PM

    RRoberts's Avatar

    Even the PNG image I also tried separately as background-image doesn't display despite having a width of 768px by 768px

  4. Support Staff 4 Posted by Shaun Sullivan on 13 Feb, 2015 09:37 PM

    Shaun Sullivan's Avatar

    Should be fine, you must have an error in the CSS somewhere. What happens
    when you view your page in a browser like Chrome or IE?

  5. 5 Posted by RRoberts on 13 Feb, 2015 09:48 PM

    RRoberts's Avatar

    Works in Chrome and IE - see attached screenshot

    but not working at all in the ipad simulator - electric plum - see screenshot

    This is what I put in the css

    html, body {
      height:100%;
        background-color: black;
        width:100%;
        margin:0 auto;
        padding: 0;
        overflow-x: hidden;
    }

  6. Support Staff 6 Posted by Shaun Sullivan on 13 Feb, 2015 09:55 PM

    Shaun Sullivan's Avatar

    I'm stumped. It works fine for me.

    Maybe right click on the page and select "Developer tools" and make sure
    the css is being loaded correctly on the "Network" tab (F5 to refresh after
    choosing the Network tab)

    It must be something environmental.

  7. Support Staff 7 Posted by Shaun Sullivan on 13 Feb, 2015 10:01 PM

    Shaun Sullivan's Avatar

    Maybe another thing to check would be for media queries being used?

  8. 8 Posted by RRoberts on 13 Feb, 2015 10:03 PM

    RRoberts's Avatar

    Here are the screenshots

    I am using the trialversion - just wonder if this could be the issue?

    or whether there is something really wrong with the css although it looks fine.

  9. 9 Posted by RRoberts on 13 Feb, 2015 10:04 PM

    RRoberts's Avatar

    Didn't use media queries - do you think I ought to try that in the CSS?

  10. 10 Posted by RRoberts on 13 Feb, 2015 10:05 PM

    RRoberts's Avatar

    Screenshots again

  11. Support Staff 11 Posted by Shaun Sullivan on 13 Feb, 2015 10:05 PM

    Shaun Sullivan's Avatar

    Nothing to do with the trial.

    Can you zip up the page source and send it to:

    shaun AT electricplum DOT COM

  12. Support Staff 12 Posted by Shaun Sullivan on 13 Feb, 2015 10:09 PM

    Shaun Sullivan's Avatar

    Ahh, jQuery Mobile (which uses media queries).

    Just to rule out jQuery mobile overriding you changes:

    1. Include you css *after* the jQuery Mobile
    2. Change your css to:

    html, body {
      height:100%;
        background-color: #000000 *!important*;
        width:100%;
        margin:0 auto;
        padding: 0;
        overflow-x: hidden;
    }

  13. Support Staff 13 Posted by Shaun Sullivan on 13 Feb, 2015 10:12 PM

    Shaun Sullivan's Avatar
  14. 14 Posted by RRoberts on 13 Feb, 2015 10:24 PM

    RRoberts's Avatar

    Have emailed you 2 zip files for your perusal.

    I am also going to try out your solution as well.

  15. 15 Posted by RRoberts on 13 Feb, 2015 10:27 PM

    RRoberts's Avatar

    1. Include your css *after* the jQuery Mobile - DID THIS - IT IS RIGHT AT THE END
    2. Change your css to: DID THIS

    html, body {
      height:100%;
        background-color: #000000 *!important*;
        width:100%;
        margin:0 auto;
        padding: 0;
        overflow-x: hidden;
    }

    But it doesn't work still.

  16. 16 Posted by RRoberts on 13 Feb, 2015 10:33 PM

    RRoberts's Avatar

    Strangely, I removed the following as there were no folders generated in my MVC4 project:

        @Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")

    This was taken out from the _layout.iPad.cshtml

    Still no joy - the colour is not showing...

  17. 17 Posted by RRoberts on 13 Feb, 2015 10:36 PM

    RRoberts's Avatar

    Got it working:

    html, body {
      height:100%;
        background-color: #000000 !important;
        width:100%;
        margin:0 auto;
        padding: 0;
        overflow-x: hidden;
    }

    Going to try the background image now...

  18. 18 Posted by RRoberts on 13 Feb, 2015 10:46 PM

    RRoberts's Avatar

    Background Image now works:

    html, body {
        margin:0;
        padding:0;
        height:100%;
        background-size: cover;
        background-image: url('boo.png') !important;
        background-repeat: no-repeat;
        background-attachment: scroll;
        overflow-x: hidden;
    }

    Massive thanks to you Shaun for showing me the direction on this starting point.

    Hopefully as I build it up with further CSS for header, content, footer will work (I know I can shout out any issues on here)

    You rock! Have a fab weekend.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

16 Oct, 2021 02:38 PM
06 Oct, 2021 05:12 AM
20 Sep, 2021 04:14 PM
02 Aug, 2021 04:22 AM
29 Jul, 2021 07:22 AM