Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts

    Background of an Image with LI

    All,
    I have the following HTML:
    Code:
    <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:
    Code:
    #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.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    .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;
    }

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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:
    Code:
    #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:
    Code:
    <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>

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by treeleaf20 View Post
    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.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    438
    Thanks
    9
    Thanked 7 Times in 7 Posts
    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?

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by treeleaf20 View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •