How to apply multiple CSS background properties using jQuery/javascript?

Question

I need to dynamically generate CSS patterns, for which I need to apply several linear-gradient or radial-gradient to the CSS background property on the client side. And I need to dynamically change the parameters of these gradients at the same time.

If I use this, only one gradient is applied to the background:

var color1;
var color2;
var color3;
var color4;
var direction1;
var direction2;
var direction3;
var direction4;
var size;

$("body").css({
    background: 'linear-gradient('+direction1+', '+color1+' 25%, transparent 25%) '+size+'/2 0,
                 linear-gradient('+direction2+', '+color2+' 25%, transparent 25%) '+size+'/2 0,
                 linear-gradient('+direction3+', '+color3+' 25%, transparent 25%),
                 linear-gradient('+direction4+', '+color4+' 25%, transparent 25%)'
});

Same thing happens here, since each property overwrites the other:

$("body").css('background','linear-gradient('+direction1+', '+color1+' 25%, transparent 25%) '+size+'/2 0)');
$("body").css('background','linear-gradient('+direction2+', '+color2+' 25%, transparent 25%) '+size+'/2 0)');
$("body").css('background','linear-gradient('+direction3+', '+color3+' 25%, transparent 25%)');
$("body").css('background','linear-gradient('+direction4+', '+color4+' 25%, transparent 25%)');

I've tried using LessCSS, but it's too CPU intense, since it needs to render a new stylesheet each time the css property changes, which is each time the mouse moves (that's a requirement).

Note that I need to apply ALL of the gradients at once, not let the browser decide which one to use.

Question 1: Any idea how I could do this more efficiently?

Question 2: I've also noticed that when I declare multiple properties in one declaration (ie. also width and height next to the linear-gradient in a background property or just even just width and height using the background-size property) only the first one gets applied. How to get around this?

i don't think you will get a result, with the way you try, an additional way, you could try is to have 4 <div/> tag for each direction with the same size as body of html page, think something like layers, or maybe you could work something with images — Gntem
– Gntem, Commented Feb 14, 2013 at 14:04
thanks for the reply, that might work (I'll try it) for question 1, but it still fails for question 2, any ideas for that? — Jure
– Jure, Commented Feb 15, 2013 at 10:51
So I've tried layering divs and it works perfectly, they just need to be stacked up in reverse order to get the same effect. Thanks! — Jure
– Jure, Commented Feb 16, 2013 at 13:37
Also for Qustion 2, it now seems to work properly, I'm not sure what I did differently. — Jure
– Jure, Commented Feb 16, 2013 at 13:37

anderssonola · Accepted Answer · 2013-02-14 14:28:21Z

1

Try somthing like this:

$("body").css({
    'backgroundImage': 'linear-gradient('+direction1+', '+color1+', transparent), 
        linear-gradient('+direction2+', '+color2+', transparent), 
        linear-gradient('+direction3+', '+color3+', transparent),  
        linear-gradient('+direction4+', '+color4+', transparent)'
    })

answered Feb 14, 2013 at 14:28

anderssonola

2,18516 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jure Over a year ago

thanks for the answer, but its the same, doesnt matter if I use background-image or background or any of their other syntax variations. I've fixed the variables here though (they were correct in my code), thanks for that. Please check the updated questions, if you have any more ideas

Collectives™ on Stack Overflow

How to apply multiple CSS background properties using jQuery/javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related