Combine background css using javascript

Question

Anyone know how to add css background without replacing the previous background with js?

for example,

<div style = "background: url (image.png)"> </ div>

after added

<div style = "background: url (image2.png), url (image.png)"> </ div>

Do you want to override the previous image with new one?

rajesh
– rajesh

2015-02-11 06:42:57 +00:00
Commented Feb 11, 2015 at 6:42 — rajesh
– rajesh, Commented Feb 11, 2015 at 6:42
You cant have two backgrounds at once.

JJJ
– JJJ

2015-02-11 06:46:36 +00:00
Commented Feb 11, 2015 at 6:46 — JJJ
– JJJ, Commented Feb 11, 2015 at 6:46
@JosanIracheta You can, with CSS3.

Rahul Desai
– Rahul Desai

2015-02-11 09:57:49 +00:00
Commented Feb 11, 2015 at 9:57 — Rahul Desai
– Rahul Desai, Commented Feb 11, 2015 at 9:57

N K · Accepted Answer · 2015-02-11 06:46:44Z

2

You can make use of CSS classes and switch between classes when required.

.class_one {
    background: url (image.png);
}

.class_two {
    background: url (image2.png), url (image.png);
}

answered Feb 11, 2015 at 6:46

N K

3,3675 gold badges25 silver badges39 bronze badges

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

3 Comments

Alan Over a year ago

I need a background "image2.png" that can be changed with javascript

N K Over a year ago

@Alan, is there any issues with the above solution?

N K Over a year ago

May be @Gael's answer is you are looking for.

Rahul Desai · Accepted Answer · 2015-02-11 07:08:08Z

0

Here is the Javascript solution:

var backgroundStyle = document.querySelector("#container").style.background;

document.querySelector("#container").style.background = backgroundStyle + ", url('http://res.cloudinary.com/demo/image/upload/sample.jpg')";

<div style = "background: url('http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg')" id="container" >
</div>

You can verify it using the Developer Tools / FireBug.

answered Feb 11, 2015 at 7:08

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

1 Comment

Rahul Desai Over a year ago

@Alan Note that the URL should be in quotes in your style.

Gaël Barbin · Accepted Answer · 2015-02-11 06:56:29Z

0

Just get the background value, and append another url(img_url)

var my_div= document.querySelector("my_div");
if( my_div.style.background == "" )
 my_div.style.background= "url(image.png)";
else
 my_div.style.background+= ",url(image2.png)";

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

edited Feb 11, 2015 at 6:56

answered Feb 11, 2015 at 6:46

Gaël Barbin

3,9353 gold badges32 silver badges53 bronze badges

3 Comments

Alan Over a year ago

is there a way to add, without get previous background?

Gaël Barbin Over a year ago

You should have to test is already a background, to know if you need to add a comma.

Gaël Barbin Over a year ago

I would suggest you to use classes as on the first answer. It's cleaner.

Collectives™ on Stack Overflow

Combine background css using javascript

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related