Menu
I'm looking to use a blank div element to display a background image but nothing is displaying unless I put something (i.e., some text) in the div element.
I need to do this because I want to display a graphic next to some text but have the graphic vertically aligned with the text.
How do you get a background image to display in a blank div?
My Google-fu has failed me.
<div class="photoInfo">
lorem ipsum |
<div style="background:url('foo.gif') no-repeat;display:inline;"></div>
</div>
Thanks!
edit: The code below actually displays the image but I just need to nick it down like 2 or 3 pixels to have it perfectly aligned.
That's what I'm trying to achieve, any ideas?
<div class="photoInfo">
Added<span class="spacer">•</span>Wed Apr 01, 2009 1:01 pm<span class="spacer">•</span>64.10 KB<span class="spacer">•</span>659x878 pixels
<span class="spacer">•</span>
<img src="/_assets/img/icons/new-photo-small.gif" />
</div>
<!--<div style="height:14px;width:31px;background:url('') no-repeat 0px 5px;display:inline-block;"></div>-->
.photoInfo
{
font-size:0.6em;
color:#b0bad9;
padding-bottom:15px;
text-align:center;
}
519
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
If you want to center your background image inside a <div> element and display the whole image without any of its part being clipped or stretched, try the following example, where we set the background-size property to its "contain" value.
In simple words, we need to create an empty div and on click event, the empty div will get the image as a background. CSS (): This is an inbuilt method in jQuery to add the CSS property but in this case, we need to provide complete property using the URL () method.
This property applies one or more background images to an element, like a <div>, as the documentation explains. Use it for aesthetic reasons, such as adding a textured background to your webpage.
Give this a shot!
one | <span style="padding-left: 20px; background: url('16x16-image.gif') no-repeat; height: 16px">two</span> | three
If you use a div instead of span, you'll need to set display: inline in the style as well.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
