JQUERY CSS Background

Question

I currently have a DIV with a background image set as follows:

background: url(../images/site/common/body-bannar-bkground.png) repeat 0 0;

How can I remove this image and set a background-color only:

background-color: #C1A3A5

I know I can use JQUERY To set the new color like this

$('div#id').css('backgroundColor', '#C1A3A5');

but when I do this the background image is still in place. How can I knockout the background image? I also need to do this in reverse so how can I knock out the background-color?

Finally - would I be better to addClass() removeClass with the attributes set there or is basically the same factor?

thx

Sarfraz · Accepted Answer · 2011-09-12 09:17:30Z

4

Just use the background shorthand rule to overwrite it:

$('div#id').css('background', '#C1A3A5');

answered Sep 12, 2011 at 9:17

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

Comments

Jose Faeti · Accepted Answer · 2011-09-12 09:22:47Z

3

Messing with CSS directly in JS is never a good idea.

Better to use different classes for different purposes, with different CSS rules, and apply/remove them accordingly. You want to keep JS, CSS and HTML separated from each other as much as possible.

Your CSS:

#id {
  background-position: 0 0;
  background-repeat:repeat;
  background-color: #C1A3A5;
}

.backgroundImage {
  background-image: url(../images/site/common/body-bannar-bkground.png);
  /* background-color: add different color if needed */
}

Your JS:

 $('#id').removeClass('backgroundImage');

You only need to add or remove the backgroundImage class to your div if you want it to be displayed or not. Other background settings won't change.

answered Sep 12, 2011 at 9:22

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

Comments

Tushar Ahirrao · Accepted Answer · 2011-09-12 09:17:16Z

0

Just Try this :

$("div#id").css("background","");
$('div#id').css('backgroundColor', '#C1A3A5');

First Statement will remove background completely and second will attach only color to background

answered Sep 12, 2011 at 9:17

Tushar Ahirrao

13.2k18 gold badges67 silver badges101 bronze badges

Collectives™ on Stack Overflow

JQUERY CSS Background

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related