I have an image section with a gradient layer that was built into the stylesheet of the theme. What in this block of code do I need to change to reduce the gradient?
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Any help with handling this block of code is appreciated.
To reduce the gradient you should change the background gradient values for example :
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
The previous style it start with opacity 0.2 at 0% of the height and end with opacity 0.9 at 100% of the height, you can change those opacity values as you need.
let say that you want to start with 0.2 and end with 0.5, the style should be like this :
background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%)
the style :
.image-section {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0.5) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.3)), color-stop(80%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0.5)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.3) 30%,rgba(0,0,0,0.4) 80%,rgba(0,0,0,0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}
Demo : https://jsfiddle.net/IA7medd/rnjunkod/
Related
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>
I am using linear gradient to generate two sections of a div with a trapezium-like border. I am not able to get a crisp boundary between the two colors, I get a very narrow region of gradient - I have been able to reduce it, but I haven't been able to reduce it completely.
This is the code I have used:
.buyers-div {
width: 100%;
height: 500px;
background: -moz-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(49%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88));
/* safari4+,chrome */
background: -webkit-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(337deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
/* ie10+ */
background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
/* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1);
/* ie6-9 */
}
<div class="buyers-div"></div>
Your declaration of the gradient produces a step of 1% between #ffffffand #197f88. Change this from
background: linear-gradient(113deg, #FFFFFF 50%, #FFFFFF 49%, #197f88 50%, #197f88 100%);
to
background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
and you get crisp boundaries (but the angle is rather suboptimal):
.buyers-div {
width: 100%;
height: 500px;
background: -moz-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
/* ff3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #FFFFFF), color-stop(50%, #FFFFFF), color-stop(50%, #197f88), color-stop(100%, #197f88));
/* safari4+,chrome */
background: -webkit-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
/* safari5.1+,chrome10+ */
background: -o-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
/* opera 11.10+ */
background: -ms-linear-gradient(337deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
/* ie10+ */
background: linear-gradient(113deg, #FFFFFF 0%, #FFFFFF 50%, #197f88 50%, #197f88 100%);
/* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#197f88', GradientType=1);
/* ie6-9 */
}
<div class="buyers-div"></div>
On A Collection of Separator Styles there you can see many different and sharp separator styles. May it's helpful for your approach.
I have created a solution which uses position relative/absolute and Before pseudo-element. Here it's:
//HMTL(PUG)
.buyers-div
CSS(SASS)
.buyers-div
position:relative
width: 100%
height: 500px
background-color: #197f88
overflow: hidden
&:before
content: ''
position: absolute
width: 100%
height: 500px
background-color: white
left: -50%
transform: skew(-45deg)
Check the SOLUTION
THANKS, T04435
I use a <div class="menu"></div> and I set a background color with a gradient.
It floats from red in the top to white in the Bottom. Here is my .css code:
.menu {
background-color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
background-image: -webkit-linear-gradient(top, #791014, #FFF);
background-image: -moz-linear-gradient(top, #791014, #FFF);
background-image: -ms-linear-gradient(top, #791014, #FFF);
background-image: -o-linear-gradient(top, #791014, #FFF);
background-image: linear-gradient(top, #791014, #FFF);
clear: both;
}
I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom)
For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.
In other words, I want to change how fast it transitions from red to white.
If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.
Note:
100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.
div {
float: left;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
margin-right: 5px;
}
.menu-60 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<br/>
<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<br/>
<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
You can use colour stops to achieve this like
background: -moz-linear-gradient(top, #791014 0%, #ffffff 28%);
background: -webkit-linear-gradient(top, #791014 0%,#ffffff 28%);
background: linear-gradient(to bottom, #791014 0%,#ffffff 28%);
You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.
http://colorzilla.com/gradient-editor/#791014+0,ffffff+28
I have a horizontal gradient bar: example
I am wondering, how to make it vertical instead of horizontal, with about 20px height.
HTML:
<div class="seperator-gradient"></div>
CSS:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
Try this:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
This will rotate what you have 90 degrees. I'm next to positive it's in the right direction, but if this goes the opposite way, change (90deg) to (270deg).
Try this code:
background-image: -webkit-gradient(
linear,
right bottom,
left bottom,
color-stop(0, #FAF5F5),
color-stop(0.55, #E0362D)
);
background-image: -o-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -moz-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -webkit-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: -ms-linear-gradient(left, #FAF5F5 0%, #E0362D 55%);
background-image: linear-gradient(to left, #FAF5F5 0%, #E0362D 55%);
You could use different css gradient creator also :D
This is what I came up with (note that the percentages maybe should be changed a little bit if you want it to have a such a small height). Anyway, for large heights this looks great:
JSFiddle
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, center top, center top, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(left, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to right, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=1 );
}
Check the "ultimate css gradient generator", this is the best tool to make gradients, it will generate them the most crossbrowser way. http://www.colorzilla.com/gradient-editor/
I'm not sure if you want to make the bar vertical or the gradient, so I'll answer both. If you mean the bar then change:
width: 100%;
height: 10px;
to
width: 10px // or however wide you want it
height: 20px
If you mean the gradient needs to be vertical, use:
.seperator-gradient {
width: 100%;
height: 10px;
border-bottom: background: #c4c4c4;
background: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(10%,#e3e3e3), color-stop(50%,#b8b8b8), color-stop(90%,#e3e3e3), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e3e3e3 10%,#b8b8b8 50%,#e3e3e3 90%,#fcfcfc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 );
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