CSS background image not appearing in Safari

Question

I have the very simple task of applying a background image to a DIV. I can view the image with every other browser except Safari. Can someone take a look at my CSS and site and

Answer 1

I played around with your site for a few minutes, and I suggest breaking up your styles for the background rather than condensing some while having others declared on their own. Change your CSS to:

#intro2services {
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
    background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
    background-attachment: fixed;
}

That removed the repeat, applied the gradient, and applied the cover sizing correctly. This is tested and working in Chrome and Safari. Firefox only works when the -moz vendor prefix is added. You can add the other vendor prefixes to be safe, but gradients are implemented in the other major browsers at this point.