I have the following image
which has this angled stripe pattern in it, I was wondering how I could create this pattern with CSS as a background pattern.
cheers,
es
(edit: I added a second example in the codepen)
Similar to an already given answer, but with an addition to avoid gradients:
http://codepen.io/anon/pen/EyNwOq
Give it a repating linear gradient background, but to avoid the gradients and to only get two separate colors, do it as follows (play around with the settings to get the stripe width and colors you like):
background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);
it can be done with background:repeating-linear-gradient
div {
height:100px;
width:100px;
background:
repeating-linear-gradient( -45deg,#000, #333 1px,#000 1px);
}
You could use linear-gradient in the background and make small boxes which makes it easy to alter the width of the stripes (10px times 10px in my example) which then form the background like this:
body {
text-align: center;
}
h4 {
padding-top: 150px;
}
.gradient-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 320px;
height: 320px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgb(255, 255, 255);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(-45deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -webkit-linear-gradient(-225deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: -moz-linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), -moz-linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), -moz-linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
background: linear-gradient(135deg, rgba(84,84,84,0) 0, rgba(84,84,84,0) 40%, rgba(29,29,29,1) 40%, rgba(0,0,0,1) 59%, rgba(58,58,58,0) 59%, rgba(63,63,63,0) 100%), linear-gradient(135deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), linear-gradient(315deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) 7%, rgba(79,79,79,0) 7%, rgba(63,63,63,0) 100%), rgba(33,29,29,1);
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 10px 10px;
background-size: 10px 10px;
}
<div class="gradient-box">
<h4>Awesome striped background</h4>
</div>
You should be able to change the background-size and the linear-gradient colours very easily to fit what you want to achieve.
Related
The range slider is not aligned with the notches as it should be aligned with. I see the problem that is(please help Im begging you!!!!!!!):
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
-------
[]
^
it is aligned here(maximum left)
-----------
[]
^
it should be aligned here(maximum left)
I don't want to do the math to align them.
I could also change the width and then align them but I don't know how.
<!doctype HTML>
<html>
<head>
<style>
.slider{
-webkit-appearance:none;
width: 200px;
height: 5px;
background: grey;
outline: none;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 25px;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 46%, rgba(255,255,255,1) 46%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 54%, rgba(0,0,0,1) 54%, rgba(0,0,0,1) 100%);
}
.slidera{
height:10px;
width:200px;
background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 11.5%, rgba(0,0,0,1) 11.5%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 13.5%, rgba(0,0,0,0) 13.5%, rgba(0,0,0,0) 24%, rgba(0,0,0,1) 24%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 26%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 36.5%, rgba(0,0,0,1) 36.5%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 38.5%, rgba(0,0,0,0) 38.5%, rgba(0,0,0,0) 49%, rgba(0,0,0,1) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 51%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 61.5%, rgba(0,0,0,1) 61.5%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 63.5%, rgba(0,0,0,0) 63.5%, rgba(0,0,0,0) 74%, rgba(0,0,0,1) 74%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 86.5%, rgba(0,0,0,1) 86.5%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 88.5%, rgba(0,0,0,0) 88.5%, rgba(0,0,0,0) 100%);
}
html,body{
background-color:#212121;
color:white;
font-family:monospace,monospace;
}
</style>
</head>
<body>
<div>
Volume:<br>
<input type="range" id="slider1" min="0" max="100" step="12.5" , value="50" class="slider" style="margin:0px;">
<br>
<div class="slidera" style="margin:0px;"></div>
</div>
<br>
<div>
Effect:<br>
<input type="range" id="slider" min="0" max="100" step="12.5" , value="50" class="slider" style="margin:0px;">
<br>
<div class="slidera" style="margin:0px;"></div>
</div>
<script>
</script>
</body>
</html>
İ am trying to achieve a spesific look but i cant have it. İ cant see the stylistic element unless i lower the opacity of the background color that i apply with pseudo classes. I actually achieved what i needed to do by applying two backgrounds. But i was so hopeless when i had the problem and it really got me angry not having the result so i am asking why cant i see the background image of the class of main2
HTML
<section class="main2">
<div class="main2_image">
<img src="images/illustration-phones.svg" alt="" class="main2_img">
</div>
<div class="main2_textbox">
<div class="box">
<h2>State of the art Infrastructure</h2>
<p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast
connectivity. This ensures your site will load instantly, no matter where your readers are,
keeping your site competitive.</p>
</div>
</div>
</section>
CSS
.main2{
margin-top: 20rem;
position: relative;
z-index: 1;
background-image: url(images/bg-pattern-circles.svg);
border-top-right-radius: 10rem;
border-bottom-left-radius: 10rem;
}
.main2::after{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -3m;
background-image:
linear-gradient(to right,
hsl(237, 17%, 21%),
hsl(237, 23%, 32%));
}
İ can only display it when i get lower the opacity of main2 pseudo class. Thanks in advance!
The end result should look like this. The after pseudo element is the circular shape that should be on top of the background image of the main2 element
you can do it by css like this
live demo
.bg-gold {
background: -webkit-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -o-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: -moz-linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
}
.bg-news {
background: -webkit-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -o-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: -moz-linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
background: linear-gradient(70deg, #ff6464 40%, #5ac8fa 40%);
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-aurora {
color: #fff;
background: -webkit-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -o-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: -moz-linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background: linear-gradient(-70deg, #fa7c30 30%, rgba(0, 0, 0, 0) 30%), url('https://www.nasa.gov/sites/default/files/thumbnails/image/pia21421-cr.jpg');
background-size: cover;
background-position: 50% 21%;
text-align: right;
}
.bg-germany {
color: #fff;
background: -webkit-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -webkit-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -o-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -o-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: -moz-linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), -moz-linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
background: linear-gradient(110deg, #000 33%, rgba(0, 0, 0, 0) 33%), linear-gradient(110deg, #dd0000 66%, #ffc608 66%);
}
.bg-purple {
color: #fff;
background: -webkit-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -webkit-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -o-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -o-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: -moz-linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), -moz-radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
background: linear-gradient(110deg, #a60af3 40%, rgba(0, 0, 0, 0) 30%), radial-gradient(farthest-corner at 0% 0%, #7a00cc 70%, #c03fff 70%);
}
.bg-spring {
background: -webkit-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -webkit-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -o-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: -moz-linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
background: linear-gradient(70deg, #fff810 30%, rgba(0,0,0,0) 30%), linear-gradient(30deg, #63e89e 60%, #ff7ee3 60%);
}
How can i color the navigation bar like this?
Black in the top left corner and blue in the bottom right corner and make a gradient in between them.
No. 1 this is not the right way you ask for,
I have the concept that's why I'm giving you, Next time you ask any question please check this,
Stack Overflow is not a free code writing service. You are expected to try to write the code yourself. After doing more research if you have a problem you can post what you've tried with a clear explanation of what isn't working and providing Minimal, Complete, and Verifiable example. I suggest you to read How to Ask a good question.
And for now try this,
.box{
width: 150px;
height: 50px;
border-radius: 0px 0px 0px 7px;
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(34%, rgba(0,0,0,1)), color-stop(100%, rgba(44,153,221,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 34%, rgba(44,153,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2c99dd', GradientType=1 );
}
<div class="box"></div>
If you wish to learn how linear-gradients work i would go here: MDN linear-gradient
.link {
width: 100px;
height: 1.5em;
display: inline-block;
background: linear-gradient(135deg, black 30%, DeepSkyBlue 100%);
}
<nav>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
<a class="link"></a>
</nav>
This might be what you are looking for.
.box {
background: rgba(0,0,0,1);
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(18%, rgba(0,0,0,1)), color-stop(100%, rgba(3,152,252,1)));
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
background: linear-gradient(135deg, rgba(0,0,0,1) 18%, rgba(3,152,252,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0398fc', GradientType=1 );
height: 80px;
width: 200px;
}
<div class='box'></div>
From http://enjoycss.com/ I used a pattern to make a background grid such as this one
.gradient-pattern {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 8.5in;
height: 11in;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: clip;
text-overflow: clip;
background: -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -webkit-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), -moz-linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), -moz-linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background: linear-gradient(0deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, #FFFFFF 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 100%), linear-gradient(0deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(209,209,209,1) 0, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), rgba(255,255,255,1);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
However when I place elements on the page, the pattern obscures the elements (all elements such as text, buttons etc)
How can I make this pattern a true background?
I set it on a div like this, and place the elements inside the div.
<div class="gradient-pattern"></div>
I would say, assign the relevant settings to the body tag:
body {
background: -webkit-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: -moz-linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), -moz-linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background: linear-gradient(0deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #FFFFFF 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(255,255,255,0.298039) 1px, rgba(0,0,0,0) 1px), rgb(34, 102, 153);
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}
I've got the following background properties I want to apply to an element:
background: url('../img/bg.png') !important;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
I want the image to be displayed first, and the gradient over it. Is it possible to do this?
Because gradients are considered images for the purposes of background (or pretty much any CSS property that takes an image), you can simply list the image after the gradient with a comma. The caveat is that because you have so many prefixes, you need to repeat the image URL for each one:
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))), url('../img/bg.png') !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%), url('../img/bg.png') !important;
I left the !important tokens in but you should probably remove them if they aren't there for any specific purpose. I did remove the -ms-linear-gradient() line though, because it's absolutely not needed.
It's probably going to require two elements, but you can use a pseudo-element to make things a little cleaner. FIDDLE.
#yourelement {
position: relative;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%) !important;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))) !important;
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%) !important;
}
#yourelement:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background: url('../img/bg.png') !important;
}
I just tried it and with luck this worked in my safari browser.
background: url('img.png'), -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%,transparent 50%,rgba(0, 0, 0, 1) 100%);
so in your case you would use
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0, 0, 0, 1)), color-stop(50%,transparent), color-stop(100%,rgba(0, 0, 0, 1))), url('../img/bg.png');
Here is a fiddle