Question

I have CSS with an image

.backgroundImg {
    background: url('./path/file.gif');
    background-repeat: no repeat;
    width: 24px;
    height: 24px;
}

.ui-highlight {
    border: 2px solid green;
    color: #363636;
    padding: 0.7em;
}

I have div tag which imports this class

<div class="ui-highlight ui-corner-all">
    <div class="backgroundImg" style="float:left;">
        some text.........
    </div>
</div>

EDIT

I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn’t show up

UPDATE

After adding width and height to the backgroundImg class the image is visible.

Answer 1

The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.

1. Right-click on “some text….” and choose Inspect Element.
2. In the HTML inspector click on the div with the class “backgroundImg”
3. On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn’t you may have the path set-up incorrectly.
4. Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn’t taking up enough space to reveal the image. If this is the case you’ll need to set a width/height or put more content in the div to fill it out.
5. The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.