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 4 of 4
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Background Image Size Problem

    I'm creating several links with individual images set to the left of each link. I've set the size of the images in my CSS, but the images all shrink if I make my text smaller than 12px.

    I was hoping someone could tell me where I'm going wrong.

    Code:
    .msgs a:link {
    background-image: url('imgs/msgs.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 20px;
    color: #4a5a73;
    text-decoration: none;
    font-size: 11px;
    }
    I want to keep it all in one class. Could someone tell me why the image won't stay 16 by 16?

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    can you paste your html please

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    ?

    Code:
    <li class="msgs"><a href="poop.html">0 msgs</a></li>
    Last edited by stevenmw; 02-28-2012 at 08:36 PM.

  • #4
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    845
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Try setting a width/height for the list tag (li). If your images are 16 by 16, you do not need to call that out when used as a background image:

    Code:
    ul li a:link {
    width: XXpx;
    height: YYpx;
    background: #fff url('imgs/msgs.png') no-repeat center left scroll;
    padding-left: 20px;
    color: #4a5a73;
    text-decoration: none;
    font-size: 11px;
    }
    Try that. You may have to do the rules separately for the list tags and then the links.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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