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.

Answer 2

Apparently Safari--or at least some versions of it--refuses to apply CSS to form fields, so if you have a clever little search box like I do, Safari won't render any CSS applied to it. I thought it was specific to my use of SVGs and then I thought it had something to do with the short code. I was stuck until I found an obscure post on GitHub from a MarcHaunschild from 2011 discussing this behavior. Anyway in the case that you're trying to style a field such as a search box, here's the fix.

Add the following to your CSS:

input[type="search"] {
  -webkit-appearance: textfield;
}

Answer 3

This is a know issue with Safari. Most of the time, adding a negative z-index to your style, will solve the issue.

z-index:-1: