css with background-img doesn't load into div
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.
5 answers
solution1
2 ACCPTED 2012-08-07 21:42:38
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
- Right-click on "some text...." and choose Inspect Element .
- In the HTML inspector click on the div with the class "backgroundImg"
- 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. - 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.
- 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.
solution2
1 2012-08-07 22:03:06
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
solution3
0 2012-08-07 21:40:32
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
solution4
0 2012-08-07 21:40:48
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight . This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
solution5
0 2012-08-07 21:46:29
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div , add a background image to the top left of the div, then write the text to the right of that image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.