image without initial src doesn't display css background-image: url(“image.png”);

Question

I have a table with the same small image on every row.

Seen as the table has thousands of rows, I'd like to not set the src , width and height of the image in html and instead do this with css using a class.

.clbtn {
width: 18px; 
height: 18px;
background-image: url("image.png");
}

Doing this would decrease the initial size of the page.

However while this work fine in chrome it doesn't in firefox. Is there another way around this than a $(document).ready(function(){ $(".clbtn").attr("src", "image.png");}); after the table?

Answer 1

That's because how the browser handle images with missing src attrs. Perhaps the most sensate thing to do if you really need to do this this way, is to src all the img with a 1x1 transparent gif.