SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to pad text within an image in CSS

    Hello,

    I want to add text to a background image like below:

    Code CSS:
    .image {
    position:absolute;
    background-color:#fff;
    width:500px;
    height:500px;
    background-image:url(images/sample.gif);
     
    font-family: arial, serif;
    font-size:12px;
    color:#848484;
    }

    When i add text padding, like below:
    Code CSS:
    padding: 0 10px 0 10px;
    my image blows out (increases and starts to repeat).

    Does anyone have a solution to this?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    What is the .image class being applied to? It would be best to post your HTML too.

    Left and right padding is added to the overall width of an element, so to avoid the blowout, reduce the width of the container by 20px (to account for the padding). E.g.

    Code:
    .image {
    position:absolute;
    background-color:#fff;
    width:480px;
    height:500px;
    background-image:url(images/sample.gif);
    font-family: arial, serif;
    font-size:12px;
    color:#848484;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I took off 20 from the width of my image and still it didn't work. It might be because of my CSS rollover i've applied?

    My image is 500px x 500px

    This is my HTML:

    Code HTML4Strict:
    <div class="property_workshops">
    <a id="icon1" href="index.html" style="color:#848484; text-decoration: none;" title="Free Investment Workshops">
    Welcome to .....</a> 
    </div>

    My CSS:

    Code CSS:
    .property_workshops {
    position:absolute; background-color:#fff; top:650px; left:0px; width:480px; height:500px; padding:0px; z-index:2; font-family: 'PT Sans', arial, serif; font-size:15px; color:#848484; text-indent:20px; line-height:22px; padding: 0 10px 0 10px; 
    }
    #icon1
    {
    display: block; width:460px; height:500px; background-image:url(images/property_workshops.gif); no-repeat 0 0;
    }
    #icon1:hover
    { 
      background-position: 0 -500px;
    }
    #icon1 span
    {
      display: none;
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try re-organizing your CSS like this:

    Code:
    .property_workshops {
      position:absolute; 
      background-color:#fff; 
      top:650px; 
      left:0px; 
      width:500px; 
      height:500px; 
      padding:0px; 
      z-index:2; font-family: 'PT Sans', arial, serif; 
      font-size:15px; 
      color:#848484; 
    }
    #icon1 {
      display: block; 
      width:480px; 
      height:500px; 
      text-indent:20px; 
      line-height:22px; 
      background:url(images/property_workshops.gif) no-repeat 0 0;
      padding: 0 10px 0 10px;
    }
    #icon1:hover {
      background-position: 0 -500px;
    }
    #icon1 span {
      display: none;
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes that worked a treat! thank you very much Ralph


Bookmarks

Posting Permissions

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