jQuery CSS background-image declaration?

Question

This is what I have:

$("#list .active").closest('.header').css({
'background-color' : '#1a2e51',
'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))',
'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)',
'background-image' : 'linear-gradient(to bottom, #2c3c6f, #071f31)'
});

Online example: http://jsfiddle.net/qSfvK/

However, it won't show me a gradient because I didn't write it well in jQuery, so how to do it?

EDIT

I can make it work in CSS but not in jquery, see what I mean by looking at this link:
http://jsfiddle.net/qSfvK/10/

Why not creating a class and using addClass?

Ram
– Ram

2012-09-16 11:18:47 +00:00
Commented Sep 16, 2012 at 11:18 — Ram
– Ram, Commented Sep 16, 2012 at 11:18

jsonnull · Accepted Answer · 2012-09-16 11:38:59Z

1

This not a problem with the html or your selector, but instead the way the css map function works. In this case, you are not sending the browser a stylesheet that it can parse and decide which background statement to use. Instead, jQuery is overwriting the background-image property each time, so the final background-image property for any browser is the last, 'linear-gradient(to bottom, #2c3c6f, #071f31)'. You can test, as I did, this by removing the gradient lines that are incompatible with your browser and re-running the fiddle.

The way to fix this would be to add conditional lines of JavaScript that assign the appropriate background-image property according to which browser is being used.

So...

IF Safari 4+, Chrome 1-9 ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-gradient(linear, left top, left bottom, from(#2c3c6f), to(#071f31))'
});

ELSE IF Safari 5.1+, Mobile Safari, Chrome 10+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-webkit-linear-gradient(top, #2c3c6f, #071f31)'
});

ELSE IF Firefox 3.6+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-moz-linear-gradient(top, #2c3c6f, #071f31)'
});

ELSE IF Opera 11.10+ ...

$("#list .active").closest('.header').css({
    'background-color' : '#1a2e51',
    'background-image' : '-o-linear-gradient(top, #2c3c6f, #071f31)'
});

And so on.

edited Sep 16, 2012 at 11:38

answered Sep 16, 2012 at 11:25

jsonnull

4153 silver badges12 bronze badges

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

2 Comments

Jonathan Over a year ago

Thanks for your reply, but try to focus more on the CSS background-image declaration

Jonathan Over a year ago

Thank you! I fully understand it now, I thought the css works the same in jQuery ;)

Collectives™ on Stack Overflow

jQuery CSS background-image declaration?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related