Grow your CSS skills. Land your dream job.

background images not working in Chrome

  • # December 17, 2012 at 6:07 pm

    Hi,
    On this development site, there is supposed to be a black stripe behind the slider,
    to go full browser width.
    http://mfdev.motivationfactor.com

    It shows up fine in Firefox 17.0.1
    It does not show up in Chrome 23.0.1271.97

    Here is the rule


    body.home.page.page-template.custom-background.custom-background-white {
    background-image: url(img/body-bg.gif);
    background-position: 0 -8px;
    background-repeat: repeat-x;
    }

    I don’t know why – suggestions appreciated.

    Thanks!

    # December 17, 2012 at 6:15 pm

    Interesting. Chrome seems to be ignoring whatever is showing up in your media query. I’d start digging into that.

    # December 17, 2012 at 6:17 pm

    OK thanks!

    # December 17, 2012 at 6:29 pm

    Put the media query(lines 1893 to 2070 in your style.css) at the very top. Chrome likes it better that way. It should work after that.

    # December 17, 2012 at 6:30 pm

    Heyo,

    There’s a very small typo in your CSS. On line 1891, there should be another curly brace to finish off the media query targeting browsers > 600px wide. That’s interfering with the next selector, which is controlling the body background.

    Once you put in the extra curly brace, the background image appears, so I’d say some browsers are simply better at handling errors like that :)

    # December 17, 2012 at 6:33 pm

    @David_Leitch is correct.

    # December 17, 2012 at 7:04 pm

    You guys are awesome. The W3C validator showed a parse error but I didn’t see the missing curly brace.

    Thanks so much.

    # December 17, 2012 at 7:12 pm

    Nice find, David.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".