The background image is not displaying correctly in the tag td

Question

I'm struggling to display a background image inside a table data cell using CSS.

<td class='details-control'></td>

When I use the following CSS rules, the image is not displayed:

td.details-control {
   background: url(http://localhost/geko/img/details_open.png) no-repeat center center;
   cursor: pointer;
}

Alternatively, when I apply the style directly inline within the td tag, like this:

<td style='background: url(http://localhost/geko/img/details_open.png) no-repeat center center' class='details-control'></td>

The image shows up. What am I doing wrong with my first approach?

Answer 1

Answer №1

One suggestion would be to review the developer console for any potential errors.

My assumption is that the issue lies in the placement of your quotes.

 background: url'(http://localhost/geko/img/details_open.png') no-repeat center center;

The correct format should be:

 background: url('http://localhost/geko/img/details_open.png') no-repeat center center;

Edit - The problem was due to the order of precedence - using !important resolved this

Answer 2

One suggestion would be to review the developer console for any potential errors.

My assumption is that the issue lies in the placement of your quotes.

 background: url'(http://localhost/geko/img/details_open.png') no-repeat center center;

The correct format should be:

 background: url('http://localhost/geko/img/details_open.png') no-repeat center center;

Edit - The problem was due to the order of precedence - using !important resolved this