tag td background doesnt show image

Question

I want to show background inside td with css.

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

This css doesnt show image

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

or

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

, but i passed away into td and image has show

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

What i'm doing wrong on myfirst way ?

Second version has quotes in wrong place. No reason the first shouldn't work if that class exists on``. Provide a [mcve] that reproduces problem — charlietfl, Dec 04 '17 at 01:28
are you sure the path from your css file and from the html is the same when trying to use the image?? are you getting an error at all? — Pato Salazar, Dec 04 '17 at 01:28

LoveHateDevelopment · Accepted Answer · 2017-12-04T02:12:43.047

0

I would check the developer console for errors.

Im assuming it has something to do with where your quotes are placed

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

should be

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

Edit - Issue was in order of precedence - !important fixed this

edited Dec 04 '17 at 02:12

answered Dec 04 '17 at 01:32

i have check my console and no error , where is different this first and second css on your answer, sorry i was typo on my question, – ony seven Dec 04 '17 at 01:35
The quotes. You open it before the bracket, and close it inside. They should both be inside the brackets. If you inspect the in console, does the background show up in the css section? – LoveHateDevelopment Dec 04 '17 at 01:37
What about the second bit? In the developer console can you inspect the , and in the css section see if background is the same as in your code? – LoveHateDevelopment Dec 04 '17 at 01:43
**td.details-control { background: url(http://localhost/geko/img/details_open.png) no-repeat center center;** cursor: pointer; } , backckground was cross out on css section – ony seven Dec 04 '17 at 01:50
Not best practice but could you try td.details-control { background: url(localhost/geko/img/details_open.png) no-repeat center center !important; cursor: pointer; } – LoveHateDevelopment Dec 04 '17 at 01:51
Yeah its work , what is !important thing means. Thanks @LoveHateDevelopment – ony seven Dec 04 '17 at 01:57
CSS works by order of importance. See: https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css. Also please mark this as the answer, thanks! – LoveHateDevelopment Dec 04 '17 at 02:12

1 Answers1