Add background-image to an existing one

Question

My checkbox contains a background-image, and when it is clicked I want a positive sign to appear above it.

I thought about adding second GIF image with a transparent background to be above the original one. When clicked a positive sign background-image should appear, and when clicked again it should disappear.

In general, 2 background-image is possible by comma separating:

background: url(image1.png) , url(image2.png);

Is it possible to use CSS to only add one to the existing one?

I hope I explained myself clearly. Thanks

Simple example attached: http://picturepush.com/public/10656582

Answer 1

Hmm not fully sure how you are doing this. If you want a way to target checkbox inputs in CSS then you would use

input[type=checkbox] {

}
input[type=checkbox]:checked {

}

If you can really use background-image on checkbox then you could ust the first one to only contain one image and then the :checked one will have both images. That way when you check a checkbox it will apply what's in the :checked and have the plus sign on top of the other image.

Answer 2

You could use a CSS sprite, changing the background position of an image with both icons when checked. In general images in checkboxes are not well supported across browsers. You may have to do this on the wrapping element instead.