...

View Full Version : Background of an Image with LI



treeleaf20
05-09-2011, 05:55 PM
All,
I have the following HTML:


<ul id="gallery" class="gallery"><h4><div class="gallery_heading">Your Recently Added Photos</div></h4> <li>
<a id="fancybox" rel="group1" href="uploaded/1304956329_3266_671641338359_14800358_42187037_6478473_n.jpg" ><img src="thumbs/1304956329_3266_671641338359_14800358_42187037_6478473_n.jpg" alt="" width="75" height="75" id="332" /></a>
</li>
<li>
<a id="fancybox" rel="group1" href="uploaded/1304956329_3266_671641333369_14800358_42187036_5237378_n.jpg" ><img src="thumbs/1304956329_3266_671641333369_14800358_42187036_5237378_n.jpg" alt="" width="75" height="75" id="331" /></a>
</li>
</ul>


I then have the following CSS to control this:

#gallery { width: 870px; height:150px; overflow:auto; border-style:solid; border-width:1px; padding:1%; -moz-border-radius: 4px/*{cornerRadius}*/; -webkit-border-radius: 4px/*{cornerRadius}*/; border-radius: 4px;} * html #gallery { height: 12em; } /* IE6 */
.gallery li { float: left; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li img { cursor: move; display:block; margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; outline: 0 0 0 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;}

Basically what I would like to do is add a background behind the image so the background color can be seen like 10 pixels around the image. Is there an easy way to do this with the CSS I have? Thanks in advance.

DanInMa
05-09-2011, 06:03 PM
.gallery li { float: left; padding: 10px; margin: 0 0.4em 0.4em 0; text-align: center;

background-image: url(/images/myimage.gif);
background-repeat: no-repeat;
background-position: center center;
}

treeleaf20
05-09-2011, 06:06 PM
Thanks, is there a way to do this with just a background color instead of creating my own image to use? If I want to change the color I just want to update the color instead of create a new image each time.

treeleaf20
05-09-2011, 06:15 PM
And actually I'd only like to apply the style to certain li elements. So would I need to update my css to something like this:


#gallery { width: 870px; height:150px; overflow:auto; border-style:solid; border-width:1px; padding:1%; -moz-border-radius: 4px/*{cornerRadius}*/; -webkit-border-radius: 4px/*{cornerRadius}*/; border-radius: 4px;} * html #gallery { height: 12em; } /* IE6 */
.gallery li { float: left; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li new_style { float: left; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li img { cursor: move; display:block; margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; outline: 0 0 0 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;}

Then make the HTML something like:


<ul id="gallery" class="gallery"><h4><div class="gallery_heading">Your Recently Added Photos</div></h4>
<li>
<a id="fancybox" rel="group1" href="uploaded/1304956329_3266_671641338359_14800358_42187037_6478473_n.jpg" ><img src="thumbs/1304956329_3266_671641338359_14800358_42187037_6478473_n.jpg" alt="" width="75" height="75" id="332" /></a>
</li>
<li class="new_style">
<a id="fancybox" rel="group1" href="uploaded/1304956329_3266_671641333369_14800358_42187036_5237378_n.jpg" ><img src="thumbs/1304956329_3266_671641333369_14800358_42187036_5237378_n.jpg" alt="" width="75" height="75" id="331" /></a>
</li>
</ul>

DanInMa
05-09-2011, 09:46 PM
Thanks, is there a way to do this with just a background color instead of creating my own image to use? If I want to change the color I just want to update the color instead of create a new image each time.

use background-color instead.

treeleaf20
05-10-2011, 03:12 PM
Sounds good, I'll try that but if I only want to apply it to certain li elements then would I update my CSS and HTML like I showed in my post before?

DanInMa
05-10-2011, 03:35 PM
Sounds good, I'll try that but if I only want to apply it to certain li elements then would I update my CSS and HTML like I showed in my post before?


just make a new class and apply it to those LI's.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum