treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] background images not working in Chrome

  • 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!

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

  • OK thanks!

  • 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.

  • 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 :)

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

    Thanks so much.

  • Nice find, David.