Background blend mode issue with background attachment fixed

Background blend mode issue with background attachment fixed - html

I have the following style in my css file to set the background of my html to a soothing gradient. However there was a problem that, if the height of the content is not 100% of the screen, the gradient gets cut off and repeats. So I added the background-attachment: fixed; line so that the gradient fills the page. But now the blend mode is not working. Earlier I had a soothing light color combination due to the background-blend-mode: screen; but now the colors are brighter. How can I fix this? I am using the latest version of mozilla firefox.
body {
background:
linear-gradient(
cyan,
transparent
),
linear-gradient(
-45deg,
magenta,
transparent
),
linear-gradient(
45deg,
orange,
transparent
);
background-blend-mode: screen;
background-attachment: fixed; //added later to fill the background
}
Here is the jsfiddle link.
Expected output
What I am getting

with this your problem is solved
html{
width:100%;
height:100%;
}
body {
background:
linear-gradient(
cyan,
rgba(255,255,255,0)
),
linear-gradient(
-45deg,
magenta,
rgba(255,255,255,0)
),
linear-gradient(
45deg,
orange,
rgba(255,255,255,0)
);
background-blend-mode: screen;
}

Ok, it looks like the 'transparent' in your CSS was going to black-transparent. If you set it to white-transparent then you'll get the desired look. As Vals mentioned, black-transparent is the standard for future reference if you run into this problem again.
Take a look at the fiddle. Should sort you all out.
Fiddle. http://jsfiddle.net/f90vwhw3/3/
CSS to fix:
body {
background:
linear-gradient(
cyan ,
rgba(255,255,255,0)
),
linear-gradient(
-45deg,
magenta,
rgba(255,255,255,0)
),
linear-gradient(
45deg,
orange,
rgba(255,255,255,0)
);
background-blend-mode: screen;
background-attachment: fixed;
}

Related

How can i combine background image and background gradients, and the background gradients is behind the image? [duplicate]

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

Multiple backgrounds!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
These 2 lines are the fallback for any browser that doesn't do gradients.
See notes for stacking images only IE < 9 below.
Line 1 sets a flat background color.
Line 2 sets the background image fallback.
The final line sets a background image and gradient for browsers that can handle them.
Line 3 is for all relatively modern browsers.
Nearly all current browsers have support for multiple background images and css backgrounds. See http://caniuse.com/#feat=css-gradients for browser support. For a good post on why you don't need multiple browser prefixes, see http://codepen.io/thebabydino/full/pjxVWp/
Layer Stack
It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient.
For more information about background layering see http://www.w3.org/TR/css3-background/#layering.
Stacking images ONLY (no gradients in the declaration) For IE < 9
IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie < 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful Conditional HTML element along with your fallback code:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Background position, sizing etc.
Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. background-size: 40px; will constrain both the image and the gradient to 40px height and width. However using background-size: 40px, cover; will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: background-position: 50%, 0 0; or for browsers that support it use initial: background-position: 50%, initial;
You may also use the background shorthand, however this removes the fallback color and image.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
The same applies to background-position, background-repeat, etc.

If you also want to set background position for your image, than you can use this:
background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback
background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
or you can also create a LESS mixin (bootstrap style):
#gradient {
.vertical-with-image(#startColor: #555, #endColor: #333, #image) {
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: #image; // fallback
background: #image, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: #image, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: #image, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: #image, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: #image, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
}
}

One thing to realize is that the first defined background image is topmost in the stack. The last defined image will be bottommost. That means, to have a background gradient behind an image, you would need:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
You could also define background positions and background size for the images.
I put together a blog post about some interesting things you can do with CSS3 gradients

you could simply type :
background: linear-gradient(
to bottom,
rgba(0,0,0, 0),
rgba(0,0,0, 100)
),url(../images/image.jpg);

my solution:
background-image: url(IMAGE_URL); /* fallback */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

I always use the following code to make it work. There are some notes:
If you place image URL before gradient, this image will be displayed above the gradient as expected.
.background-gradient {
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
height: 500px;
width: 500px;
}
<div class="background-gradient"></div>
If you place gradient before image URL, this image will be displayed under the gradient.
.background-gradient {
background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
width: 500px;
height: 500px;
}
<div class="background-gradient"></div>
This technique is just the same as we have multiple background images as describe here

I had an implementation where I needed to take this technique a step farther, and wanted to outline my work. The below code does the same thing but uses SASS, Bourbon, and an image sprite.
#mixin sprite($position){
#include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
}
a.button-1{
#include sprite(0 0);
}
a.button-2{
#include sprite (0 -20px);
}
a.button-2{
#include sprite (0 -40px);
}
SASS and Bourbon take care of the cross browser code, and now all I have to declare is the sprite position per button. It is easy to extend this principal for the buttons active and hover states.

If you have strange errors with downloading background images use W3C Link checker: https://validator.w3.org/checklink
Here are modern mixins that I use (credits: PSA: don't use gradient generators):
.buttonAkc
{
.gradientBackground(#imageName: 'accept.png');
background-repeat: no-repeat !important;
background-position: center right, top left !important;
}
.buttonAkc:hover
{
.gradientBackgroundHover('accept.png');
}
.gradientBackground(#startColor: #fdfdfd, #endColor: #d9d9db, #imageName)
{
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: url("#{img-folder}/#{imageName}?v=#{version}"); // fallback
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, -webkit-linear-gradient(top, #startColor 0%, #endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, linear-gradient(to bottom, #startColor 0%, #endColor 100%) no-repeat scroll left top;
}
.gradientBackgroundHover(#imageName)
{
.gradientBackground(#fdfdfd, #b5b6b9, #imageName);
}

If you want a gradient with a single background image in the center, you can do it with one line of code like this:
body {
background: url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

Use background-blend-mode and rgba to mix the background image and color
This is what you need:
.myblendedbg {
background-image: url("some_image.png");
background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
background-blend-mode: multiply;
}
If you adjust the alpha value of the rgba color value (it's at .85 in the example), you can control the transparency.
Also, background-blend-mode has other values you can play with to get some really creative results.
NOTE: background-blend-mode: color; fails on Firefox, while multiply works on all modern browsers

Here is a MIXIN that I created to handle everything that people might like to use:
.background-gradient-and-image (#fallback, #imgUrl, #background-position-x, #background-position-y, #startColor, #endColor) {
background: #fallback;
background: url(#imgUrl) #background-position-x #background-position-y no-repeat; /* fallback */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(#startColor) #background-position-x #background-position-y no-repeat, to(#endColor)); /* Saf4+, Chrome */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); /* Chrome 10+, Saf5.1+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -moz-linear-gradient(top, #startColor, #endColor); /* FF3.6+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -ms-linear-gradient(top, #startColor, #endColor); /* IE10 */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -o-linear-gradient(top, #startColor, #endColor); /* Opera 11.10+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, linear-gradient(top, #startColor, #endColor); /* W3C */
}
This can be used like so:
.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);
Hope you guys find this helpful.
credit to #Gidgidonihah for finding the initial solution.

I was trying to do the same thing. While background-color and background-image exist on separate layers within an object -- meaning they can co-exist -- CSS gradients seem to co-opt the background-image layer.
From what I can tell, border-image seems to have wider support than multiple backgrounds, so maybe that's an alternative approach.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: A bit more research. Seems Petra Gregorova has something working here --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

You could use multiple background: linear-gradient(); calls, but try this:
If you want the images to be completely fused together where it doesn't look like the elements load separately due to separate HTTP requests then use this technique. Here we're loading two things on the same element that load simultaneously...
Just make sure you convert your pre-rendered 32-bit transparent png image/texture to base64 string first and use it within the background-image css call (in place of INSERTIMAGEBLOBHERE in this example).
I used this technique to fuse a wafer looking texture and other image data that's serialized with a standard rgba transparency / linear gradient css rule. Works better than layering multiple art and wasting HTTP requests which is bad for mobile. Everything is loaded client side with no file operation required, but does increase document byte size.
div.imgDiv {
background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
}

If you have to get gradients and background images working together in IE 9 (HTML 5 & HTML 4.01 Strict), add the following attribute declaration to your css class and it should do the trick:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');
Notice that you use the filter attribute and that there are two instances of progid:[val] separated by a comma before you close the attribute value with a semicolon. Here's the fiddle. Also notice that when you look at the fiddle the gradient extends beyond the rounded corners. I don't have a fix for that other not using rounded corners. Also note that when using a relative path in the src [IMAGE_URL] attribute, the path is relative to the document page and not the css file (See source).
This article (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) is what lead me to this solution. It's pretty helpful for IE-specific CSS3.

I resolve the problem in that way. I define Gradient in HTML and background image in the Body
html {
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
height: 100%
}
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
height: 100%
}

this is a background image with Gradient overlay, the 26% is the opacity and 7deg is the gradient position
CSS Gradient Generator
backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,

I wanted to make span button with background image, background gradient combination.
http://enjoycss.com/ helped to do my work task. Only I have to remove some auto generated additional CSS. But it's really nice site build your scratch work.
#nav a.link-style span {
background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 8px;
border: 3px solid #b30a11;
}

For my responsive design, my drop-box down-arrow on the right side of the box (vertical accordion), accepted percentage as position. Initially the down-arrow was "position: absolute; right: 13px;". With the 97% positioning it worked like charm as follows:
> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png) no-repeat 97% center;
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
P.S. Sorry, don't know how to handle the filters.

I hope this is cross-browser enough:
(modified base from gradient editor with black to transparent vertical gradient on top of image)
background-image: url('YOURIMAGE.JPG');
background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */

As a sure method way, you can just make a background image that is say 500x5 pixels, in your css use:
background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;
Where xxxxxx corresponds with the color that matches the final gradient color.
You could also fix this to the bottom of the screen and have it match the initial gradient color.

Is there anyway to overlap background image with gradient inside a single background property? [duplicate]

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

If you also want to set background position for your image, than you can use this:
background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback
background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
or you can also create a LESS mixin (bootstrap style):
#gradient {
.vertical-with-image(#startColor: #555, #endColor: #333, #image) {
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: #image; // fallback
background: #image, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: #image, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: #image, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: #image, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: #image, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
}
}

One thing to realize is that the first defined background image is topmost in the stack. The last defined image will be bottommost. That means, to have a background gradient behind an image, you would need:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
You could also define background positions and background size for the images.
I put together a blog post about some interesting things you can do with CSS3 gradients

you could simply type :
background: linear-gradient(
to bottom,
rgba(0,0,0, 0),
rgba(0,0,0, 100)
),url(../images/image.jpg);

my solution:
background-image: url(IMAGE_URL); /* fallback */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

I always use the following code to make it work. There are some notes:
If you place image URL before gradient, this image will be displayed above the gradient as expected.
.background-gradient {
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
height: 500px;
width: 500px;
}
<div class="background-gradient"></div>
If you place gradient before image URL, this image will be displayed under the gradient.
.background-gradient {
background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
width: 500px;
height: 500px;
}
<div class="background-gradient"></div>
This technique is just the same as we have multiple background images as describe here

I had an implementation where I needed to take this technique a step farther, and wanted to outline my work. The below code does the same thing but uses SASS, Bourbon, and an image sprite.
#mixin sprite($position){
#include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
}
a.button-1{
#include sprite(0 0);
}
a.button-2{
#include sprite (0 -20px);
}
a.button-2{
#include sprite (0 -40px);
}
SASS and Bourbon take care of the cross browser code, and now all I have to declare is the sprite position per button. It is easy to extend this principal for the buttons active and hover states.

If you have strange errors with downloading background images use W3C Link checker: https://validator.w3.org/checklink
Here are modern mixins that I use (credits: PSA: don't use gradient generators):
.buttonAkc
{
.gradientBackground(#imageName: 'accept.png');
background-repeat: no-repeat !important;
background-position: center right, top left !important;
}
.buttonAkc:hover
{
.gradientBackgroundHover('accept.png');
}
.gradientBackground(#startColor: #fdfdfd, #endColor: #d9d9db, #imageName)
{
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: url("#{img-folder}/#{imageName}?v=#{version}"); // fallback
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, -webkit-linear-gradient(top, #startColor 0%, #endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, linear-gradient(to bottom, #startColor 0%, #endColor 100%) no-repeat scroll left top;
}
.gradientBackgroundHover(#imageName)
{
.gradientBackground(#fdfdfd, #b5b6b9, #imageName);
}

If you want a gradient with a single background image in the center, you can do it with one line of code like this:
body {
background: url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

Use background-blend-mode and rgba to mix the background image and color
This is what you need:
.myblendedbg {
background-image: url("some_image.png");
background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
background-blend-mode: multiply;
}
If you adjust the alpha value of the rgba color value (it's at .85 in the example), you can control the transparency.
Also, background-blend-mode has other values you can play with to get some really creative results.
NOTE: background-blend-mode: color; fails on Firefox, while multiply works on all modern browsers

Here is a MIXIN that I created to handle everything that people might like to use:
.background-gradient-and-image (#fallback, #imgUrl, #background-position-x, #background-position-y, #startColor, #endColor) {
background: #fallback;
background: url(#imgUrl) #background-position-x #background-position-y no-repeat; /* fallback */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(#startColor) #background-position-x #background-position-y no-repeat, to(#endColor)); /* Saf4+, Chrome */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); /* Chrome 10+, Saf5.1+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -moz-linear-gradient(top, #startColor, #endColor); /* FF3.6+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -ms-linear-gradient(top, #startColor, #endColor); /* IE10 */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -o-linear-gradient(top, #startColor, #endColor); /* Opera 11.10+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, linear-gradient(top, #startColor, #endColor); /* W3C */
}
This can be used like so:
.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);
Hope you guys find this helpful.
credit to #Gidgidonihah for finding the initial solution.

I was trying to do the same thing. While background-color and background-image exist on separate layers within an object -- meaning they can co-exist -- CSS gradients seem to co-opt the background-image layer.
From what I can tell, border-image seems to have wider support than multiple backgrounds, so maybe that's an alternative approach.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: A bit more research. Seems Petra Gregorova has something working here --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

You could use multiple background: linear-gradient(); calls, but try this:
If you want the images to be completely fused together where it doesn't look like the elements load separately due to separate HTTP requests then use this technique. Here we're loading two things on the same element that load simultaneously...
Just make sure you convert your pre-rendered 32-bit transparent png image/texture to base64 string first and use it within the background-image css call (in place of INSERTIMAGEBLOBHERE in this example).
I used this technique to fuse a wafer looking texture and other image data that's serialized with a standard rgba transparency / linear gradient css rule. Works better than layering multiple art and wasting HTTP requests which is bad for mobile. Everything is loaded client side with no file operation required, but does increase document byte size.
div.imgDiv {
background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
}

If you have to get gradients and background images working together in IE 9 (HTML 5 & HTML 4.01 Strict), add the following attribute declaration to your css class and it should do the trick:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');
Notice that you use the filter attribute and that there are two instances of progid:[val] separated by a comma before you close the attribute value with a semicolon. Here's the fiddle. Also notice that when you look at the fiddle the gradient extends beyond the rounded corners. I don't have a fix for that other not using rounded corners. Also note that when using a relative path in the src [IMAGE_URL] attribute, the path is relative to the document page and not the css file (See source).
This article (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) is what lead me to this solution. It's pretty helpful for IE-specific CSS3.

I resolve the problem in that way. I define Gradient in HTML and background image in the Body
html {
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
height: 100%
}
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
height: 100%
}

this is a background image with Gradient overlay, the 26% is the opacity and 7deg is the gradient position
CSS Gradient Generator
backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,

I wanted to make span button with background image, background gradient combination.
http://enjoycss.com/ helped to do my work task. Only I have to remove some auto generated additional CSS. But it's really nice site build your scratch work.
#nav a.link-style span {
background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 8px;
border: 3px solid #b30a11;
}

For my responsive design, my drop-box down-arrow on the right side of the box (vertical accordion), accepted percentage as position. Initially the down-arrow was "position: absolute; right: 13px;". With the 97% positioning it worked like charm as follows:
> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png) no-repeat 97% center;
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
P.S. Sorry, don't know how to handle the filters.

I hope this is cross-browser enough:
(modified base from gradient editor with black to transparent vertical gradient on top of image)
background-image: url('YOURIMAGE.JPG');
background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */

As a sure method way, you can just make a background image that is say 500x5 pixels, in your css use:
background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;
Where xxxxxx corresponds with the color that matches the final gradient color.
You could also fix this to the bottom of the screen and have it match the initial gradient color.

Why can't I use background image and gradient together? [duplicate]

How do I use CSS3 gradients for my background-color and then apply a background-image to apply some sort of light transparent texture?

If you also want to set background position for your image, than you can use this:
background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback
background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
or you can also create a LESS mixin (bootstrap style):
#gradient {
.vertical-with-image(#startColor: #555, #endColor: #333, #image) {
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: #image; // fallback
background: #image, -moz-linear-gradient(top, #startColor, #endColor); // FF 3.6+
background: #image, -webkit-gradient(linear, 0 0, 0 100%, from(#startColor), to(#endColor)); // Safari 4+, Chrome 2+
background: #image, -webkit-linear-gradient(top, #startColor, #endColor); // Safari 5.1+, Chrome 10+
background: #image, -o-linear-gradient(top, #startColor, #endColor); // Opera 11.10
background: #image, linear-gradient(to bottom, #startColor, #endColor); // Standard, IE10
}
}

One thing to realize is that the first defined background image is topmost in the stack. The last defined image will be bottommost. That means, to have a background gradient behind an image, you would need:
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
You could also define background positions and background size for the images.
I put together a blog post about some interesting things you can do with CSS3 gradients

you could simply type :
background: linear-gradient(
to bottom,
rgba(0,0,0, 0),
rgba(0,0,0, 100)
),url(../images/image.jpg);

my solution:
background-image: url(IMAGE_URL); /* fallback */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

I always use the following code to make it work. There are some notes:
If you place image URL before gradient, this image will be displayed above the gradient as expected.
.background-gradient {
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
height: 500px;
width: 500px;
}
<div class="background-gradient"></div>
If you place gradient before image URL, this image will be displayed under the gradient.
.background-gradient {
background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
width: 500px;
height: 500px;
}
<div class="background-gradient"></div>
This technique is just the same as we have multiple background images as describe here

I had an implementation where I needed to take this technique a step farther, and wanted to outline my work. The below code does the same thing but uses SASS, Bourbon, and an image sprite.
#mixin sprite($position){
#include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
}
a.button-1{
#include sprite(0 0);
}
a.button-2{
#include sprite (0 -20px);
}
a.button-2{
#include sprite (0 -40px);
}
SASS and Bourbon take care of the cross browser code, and now all I have to declare is the sprite position per button. It is easy to extend this principal for the buttons active and hover states.

If you have strange errors with downloading background images use W3C Link checker: https://validator.w3.org/checklink
Here are modern mixins that I use (credits: PSA: don't use gradient generators):
.buttonAkc
{
.gradientBackground(#imageName: 'accept.png');
background-repeat: no-repeat !important;
background-position: center right, top left !important;
}
.buttonAkc:hover
{
.gradientBackgroundHover('accept.png');
}
.gradientBackground(#startColor: #fdfdfd, #endColor: #d9d9db, #imageName)
{
background-color: mix(#startColor, #endColor, 60%); // fallback
background-image: url("#{img-folder}/#{imageName}?v=#{version}"); // fallback
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, -webkit-linear-gradient(top, #startColor 0%, #endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
background: url("#{img-folder}/#{imageName}?v=#{version}") no-repeat scroll right center, linear-gradient(to bottom, #startColor 0%, #endColor 100%) no-repeat scroll left top;
}
.gradientBackgroundHover(#imageName)
{
.gradientBackground(#fdfdfd, #b5b6b9, #imageName);
}

If you want a gradient with a single background image in the center, you can do it with one line of code like this:
body {
background: url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

Use background-blend-mode and rgba to mix the background image and color
This is what you need:
.myblendedbg {
background-image: url("some_image.png");
background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
background-blend-mode: multiply;
}
If you adjust the alpha value of the rgba color value (it's at .85 in the example), you can control the transparency.
Also, background-blend-mode has other values you can play with to get some really creative results.
NOTE: background-blend-mode: color; fails on Firefox, while multiply works on all modern browsers

Here is a MIXIN that I created to handle everything that people might like to use:
.background-gradient-and-image (#fallback, #imgUrl, #background-position-x, #background-position-y, #startColor, #endColor) {
background: #fallback;
background: url(#imgUrl) #background-position-x #background-position-y no-repeat; /* fallback */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(#startColor) #background-position-x #background-position-y no-repeat, to(#endColor)); /* Saf4+, Chrome */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -webkit-linear-gradient(top, #startColor, #endColor); /* Chrome 10+, Saf5.1+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -moz-linear-gradient(top, #startColor, #endColor); /* FF3.6+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -ms-linear-gradient(top, #startColor, #endColor); /* IE10 */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, -o-linear-gradient(top, #startColor, #endColor); /* Opera 11.10+ */
background: url(#imgUrl) #background-position-x #background-position-y no-repeat, linear-gradient(top, #startColor, #endColor); /* W3C */
}
This can be used like so:
.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);
Hope you guys find this helpful.
credit to #Gidgidonihah for finding the initial solution.

I was trying to do the same thing. While background-color and background-image exist on separate layers within an object -- meaning they can co-exist -- CSS gradients seem to co-opt the background-image layer.
From what I can tell, border-image seems to have wider support than multiple backgrounds, so maybe that's an alternative approach.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: A bit more research. Seems Petra Gregorova has something working here --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

You could use multiple background: linear-gradient(); calls, but try this:
If you want the images to be completely fused together where it doesn't look like the elements load separately due to separate HTTP requests then use this technique. Here we're loading two things on the same element that load simultaneously...
Just make sure you convert your pre-rendered 32-bit transparent png image/texture to base64 string first and use it within the background-image css call (in place of INSERTIMAGEBLOBHERE in this example).
I used this technique to fuse a wafer looking texture and other image data that's serialized with a standard rgba transparency / linear gradient css rule. Works better than layering multiple art and wasting HTTP requests which is bad for mobile. Everything is loaded client side with no file operation required, but does increase document byte size.
div.imgDiv {
background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
}

If you have to get gradients and background images working together in IE 9 (HTML 5 & HTML 4.01 Strict), add the following attribute declaration to your css class and it should do the trick:
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');
Notice that you use the filter attribute and that there are two instances of progid:[val] separated by a comma before you close the attribute value with a semicolon. Here's the fiddle. Also notice that when you look at the fiddle the gradient extends beyond the rounded corners. I don't have a fix for that other not using rounded corners. Also note that when using a relative path in the src [IMAGE_URL] attribute, the path is relative to the document page and not the css file (See source).
This article (http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) is what lead me to this solution. It's pretty helpful for IE-specific CSS3.

I resolve the problem in that way. I define Gradient in HTML and background image in the Body
html {
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
height: 100%
}
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
height: 100%
}

this is a background image with Gradient overlay, the 26% is the opacity and 7deg is the gradient position
CSS Gradient Generator
backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,

I wanted to make span button with background image, background gradient combination.
http://enjoycss.com/ helped to do my work task. Only I have to remove some auto generated additional CSS. But it's really nice site build your scratch work.
#nav a.link-style span {
background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
background-repeat: no-repeat;
background-position: 50% 50%;
border-radius: 8px;
border: 3px solid #b30a11;
}

For my responsive design, my drop-box down-arrow on the right side of the box (vertical accordion), accepted percentage as position. Initially the down-arrow was "position: absolute; right: 13px;". With the 97% positioning it worked like charm as follows:
> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png) no-repeat 97% center;
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center, -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
P.S. Sorry, don't know how to handle the filters.

I hope this is cross-browser enough:
(modified base from gradient editor with black to transparent vertical gradient on top of image)
background-image: url('YOURIMAGE.JPG');
background-image: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
background-image: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
background-image: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */

As a sure method way, you can just make a background image that is say 500x5 pixels, in your css use:
background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;
Where xxxxxx corresponds with the color that matches the final gradient color.
You could also fix this to the bottom of the screen and have it match the initial gradient color.

Firefox linear-gradient issue

I've got a gradient div, here it is:
<div class="gradient"></div>
And here is css:
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, #fff 100%)
}
Very simple.
In Chrome it's works fine, but in Firefox (34.0, Ubuntu 14.04) it's work not correctly:
I tried use rgba(0,0,0,0) instead transparent, tried -moz-linear-gradient prefix — no results.
dabblet link
Thanks!

If you want to avoid the grey in the middle you can use a gradient from transparent white (255, 255, 255, 0) to opaque white (255, 255, 255, 1),#fff.
.gradient {
width: 20px;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%)
}
http://dabblet.com/gist/64dd43f37e8978d08749
In your code the gradient goes from transparent black to opaque white and because of that the grey part in the middle shows up in FF.
I guess chrome and other browser calculate the color steps in the gradient differently.

CSS, can i use two different colors in one table cell? (for example dark purple and light purple)

Doen anyone know how to use two colors in one table cell (td) and how to let them overflow inc each other?
For examble. For my website (www.ericversteeg.nl) i want to use in my guest book title columns light purple in the top of the cell and dark purple in the bottom.
I think i have to assign a class in the td.
But how do i make my class in CSS?
Greetings Eric

The CSS 3 drafts introduce gradient colours.
e.g.
background: linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
Note that browser support is not universal.

I found this tool quite helpfull: CSS3 Gradient Generator. The code it produces isn't the most beutiful but it works!

There are a couple ways to do this. The first is to have a div on top and a div on bottom, each with the different color.
<td class="multi_purple">
<div class="top">
</div>
<div class="bottom">
</div>
</td>
and style the two divs with their respective colors.
A "better" option would be to just use a background image of the right colors. This will be cross browser supported, but doesnt do well if your table grows or shrinks in size.
The newest option would be to add a gradient. check out http://www.css3please.com to see the syntax for this.
but its something like this
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444444, #999999);
background-image: -moz-linear-gradient(top, #444444, #999999);
background-image: -ms-linear-gradient(top, #444444, #999999);
background-image: -o-linear-gradient(top, #444444, #999999);
background-image: linear-gradient(to bottom, #444444, #999999);
with of course your purple shades in place.
This degrades into a solid color for browsers that dont support gradients (lookin at you ie 6/7?)

You could use a background gradient like was suggested, or using a background image that has both colors in it.
If you know that your cells are going to be say, 30px tall, make a 30px tall by 1px wide image that is split where you want it, and have both colors in it. Then using css:
td {
background-image: url(colors.png);
background-repeat: repeat-x;
}
To tile it horizontally, thus getting the effect you're after.

Is this what you're looking for?
http://jsfiddle.net/4NXRx/2/
It uses a background gradient and you don't need to call any image resources. You also don't have to worry about updating the image.
There's a back-up color for browsers that don't support gradients. It's an effect that isn't crucial to all visitors, so it's no big deal if some visitors don't see a gradient.
Note, that I have made the stops at 49%, so there is no gradual change. I don't know if that's what you want. Obviously, you'll have to choose nicer colors.
table td {
padding: 10px;
background-color: #CEC3FA;
background-image: linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -o-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -moz-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -ms-linear-gradient(49%, #CEC3FA 8%, #B9AAD1 51%);
background-image: -webkit-gradient(
linear,
right 49%,
right 50%,
color-stop(0.08, #CEC3FA),
color-stop(0.51, #B9AAD1)
);

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008