CODEWITHSUNDEEP
cssgradient
Franco
Franco

Reputation: 2926

Showing two different gradients as a background using CSS?

I want to have 2 different gradients in the background of my site - I am using the following to call one gradient - how do I declare more than one (i.e. to show a different gradient on the left and a different one on the right)

body
{

    background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#fff));
    background: -moz-linear-gradient(top,  #E0E0E0,  #fff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#ffffff');


}

So I want want the left side of the background to be a different colour gradient to the right.

Any ideas?

Cheers!

Upvotes: 1

Views: 175

Answers (1)

FelipeAls
FelipeAls

Reputation: 22171

<void after update of your question>
You should use a [multi-background](http://www.w3.org/TR/css3-background/#layering) 
declaration where the first and second values are separated by a comma like 
`background: value1, value2;`.

Also the background on top (here a gradient) should whether not recover entirely the
first one or have some transparency, obviously.
</void>

Here's a fiddle using the :before pseudo to create something to stick a background on without creating an extra element in the HTML code. If linear-gradient is supported by a browser, then :before is also supported AFAIK so no problem here.

http://jsfiddle.net/URWD8/

The main trick is creating a box half-size and well positioned (and then having text content above this absolutely positioned box with z-index ... by trial and error I admit).

And use also declarations with the other vendor prefixes: -o- is lacking here and also the one without prefix linear-gradient for IE10 and future versions of other browsers. See http://caniuse.com/#feat=css-gradients

OT:
Fun and/or abusing of :before and :after :) with http://css-tricks.com/examples/ShapesOfCSS/ and http://ie7nomore.com/#CSS2 (search for those pseudos in both pages)

Upvotes: 1

Related Questions