Question

I am trying to add a custom image to a checkbox and I’m using this code:

input[type=checkbox] {
    display:none;
  }

input[type=checkbox] + label
   {
       background-image: url("../images/checkbox-bg.png") no-repeat 0 0;
       height: 16px;
       width: 16px;
       display:inline-block;
       padding: 0 0 0 0px;
   }

The path is right but the image is not even showing.

I need the image to appear to the left of the label.

Can anyone see a problem on the code above please?

Thanks

Here is the HTML:

<input type="checkbox" value="1" /><label>The Label</label>

Answer 1

when you want to set position and repeat option for background, you should use background instead of background-image.
also as I know the background position should appear before repeat option. but I am not sure. try it.

background: url("../images/checkbox-bg.png") top left no-repeat;

and do not forget, if your css selector is in a seperate stylesheet file, image path should be relative to address of your .css file! if you placed your css selector in you html page, image path should be relative to your html file!