Safari wont display background image in <div> - html

Question

I can't seem to get the background image to show in Safari. It works in IE and Chrome. I tried a couple of alternates with the -webkit prefix but no dice.
<style type="text/css">
h1, h2, h3, h4, p {position: relative; z-index: 10;}
.jumbotron {
position: relative;
z-index: 3;
}
.jumbotron:after {
background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5)), url('img/carousel_island.png');
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
</style>
Here is the HTML:
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1><strong>Welcome to Pepi's Island</strong></h1>
<h3><strong>A place for kids to emotionally and socially learn and grow.</strong></h3>
<br>
<p><a class="btn btn-success btn-lg">Learn more »</a></p>
</div>
</div>

Answer 1

Safari has some known bugs when using the short-hand background style; some features that are supported as individual CSS styles do not work when used together in a single background style.
I'm not sure whether the styles you're using here would be affected, but it's worth a try (I know for a fact that it bites background-sizing and others).
So I suggest splitting your background style out into separate styles:
background-color: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5));
background-image: url('img/carousel_island.png');
Hope that helps.

Answer 2

Try
.jumbotron:after {
content: url(img/carousel_island.png);
background-color:linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5));
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}

Answer 3

For my simple test it DOES show up, but your background is from white to 0.5 alpha-white. Try adding "background-color: red" to the CSS and you'll see your problem.
EDIT:
Some seconds after posting it I realized how stupid it was before actually testing it on safari, my bad.
I can confirm that it does not work in safari 5.xx on win7. But this worked for me, could you test if it does for you also?
.jumbotron:after {
background-image:url('img/carousel_island.png');
}
If not, there are some more ideas that come to my mind (just long-shot-guesses):
1. mobile safaris have a limitation of 3MP or 5MP for PNG images
2. case of letters
3. try `./img/carousel_island.png`
4. A protocol restriction? Do you run it on a server or by `file://` or a `http(s)://` protocol?