CSS background via jQuery

Question

I am trying to add a CSS attribute using jQuery but having an issue with the Background selector. Right now I have:

$('#nav_wrap').css({ 'position': 'fixed',
                     'margin-top':0,
                     'z-index':400,
                     'background-color': 'red',
                     'top':0,
                     'left':0 });

which gives the the color Red just fine, nothing wrong with the code. What I want to do is make it a gradient but when I change it to this:

 $('#nav_wrap').css({ 'position': 'fixed',
                      'margin-top':0,
                      'z-index':400,
                      'background': 'linear-gradient(top, #dc0000 0%,#650101 100%)',
                      'top':0, 'left':0 });

The background attribute doesnt get recognized. Any ideas why? Thanks.

What browser you're using? linear-gradient isn't cross browser. — gustavohenke
– gustavohenke, Commented Aug 27, 2013 at 22:24
to the first comment, he's asking how to do it in jquery, how is that not clear? did you not read the question lol. Check out this thread, stackoverflow.com/questions/5735521/jquery-css-gradient seems to have what you need. — Shan Robertson
– Shan Robertson, Commented Aug 27, 2013 at 22:24

gustavohenke · Accepted Answer · 2013-08-27 22:48:26Z

2

As you demonstrated up to use classes instead of manually setting each CSS property for such purpose in the comments, here's how you would do it cross browser (IE8+):

CSS

.yourClass {
  position: fixed;
  margin-top: 0;
  z-index: 400;
  top: 0;
  left: 0;

  /* Safari 5.1, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, #dc0000, #650101);

  /* Safari 4+, Chrome 2+ */
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc0000), to(#650101));

  /* FF 3.6+ */
  background-image: -moz-linear-gradient(top, #dc0000, #650101); 

  /* Opera 11.10 */ 
  background-image: -o-linear-gradient(top, #dc0000, #650101);

  /* Standard, IE 10 */
  background-image: linear-gradient(to bottom, #dc0000, #650101);

  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdc0000', endColorstr='#ff650101', GradientType=0);
}

JS

$('#nav_wrap').addClass("yourClass");

edited Aug 27, 2013 at 22:48

answered Aug 27, 2013 at 22:35

gustavohenke

41.5k14 gold badges125 silver badges133 bronze badges

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

Comments

Khawer Zeshan · Accepted Answer · 2013-08-27 22:38:51Z

1

Why don't you use classes and than add and remove class using jquery

$('#check').addClass('gradient'); //add class
$('#check').removeClass('gradient'); //remove class

FIDDLE

answered Aug 27, 2013 at 22:38

Khawer Zeshan

9,6568 gold badges43 silver badges63 bronze badges

Comments

Paramasivan · Accepted Answer · 2013-08-27 22:41:37Z

0

Try

$('#nav_wrap').css({ 'position': 'fixed',
                  'margin-top':0,
                  'z-index':400,
                  'background': 'linear-gradient(to bottom, #dc0000 0%,#650101 100%)',
                  'top':0, 'left':0 });

answered Aug 27, 2013 at 22:41

Paramasivan

7913 gold badges12 silver badges27 bronze badges

Collectives™ on Stack Overflow

CSS background via jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related