SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Behaviour Totally Foixes Me :-(

    Buongiorno from 1 degrees C snowing Wetherby UK :-)

    On this page http://tutorial.davidclick.com/2menu.html & illustrated in two parts:

    NO Padding no show

    http://i216.photobucket.com/albums/c...ps565efddf.jpg


    Padding Show

    http://i216.photobucket.com/albums/c...psaa8a6a67.jpg

    I totally do not understand why when the background image has padding added suddenly the background image frame appears. It confuses me because I made sure the background image is bigger than the fox image. For example the image frame is:
    120 x 174 & the fox image is smaller at 70 x 86.

    So my question is please why do i have to add padding to a background image on another image element for it to show. My head hurts...


    Any insights welcome,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    David, give this experiment a try and see if it helps explain what is happening.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    Given:
    .basiframe is an image, not a separate container.
    If the image is opaque, we can apply a background-color to it and the background-color will be hidden behind the image.
    The background color will be displayed around the edges of the image IF padding is applied around the image.
    
    Instead of applying a background-color, you have applied a background-image on your page.
    
    In the following example, we find Basil floating left, surrounded by a magenta outline.
    
    1. Add the background-color by deleting the opening (left-most) comment mark.
       Hmmm.  Nothing changes.
    2. OK, lets add some padding around the image by uncommenting {padding:26px 21px;}
       Ahhh.  Gray background-color appears around the edges of the image!
    3. OK, lets get nutty and add even more padding.  Uncomment the last line of padding.
       Wow! Talk about a gray area!
    4. We know that background-images repeat by default to fill their container, 
       so I have allowed your background-image to repeat ad-nauseum.
    5. Enable the background-image by deleting the left-most comment mark.
       The background-image overlays (hides) the background-color.
       Because of the massive amount of padding around the image, we now find Basil in the middle
         of 9 frames.
    6. Mix and match to expand this experiment.  :)
    
    An off-beat example, I know, but I hope it helps.
    
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    img.basilframe {
        outline:1px solid magenta;
    /*    background-color:#ccc;  /* */
    /*    background-image:url(frame.jpg);  /* */
    /*    background-repeat:no-repeat;  /* "repeat" is the default */
        float:left;
    /*    padding:26px 21px;  /* */
    /*    padding:164px 133px;  /* */
    }
    
        </style>
    </head>
    <body>
    
    <img class="basilframe" src="basil-70-86.jpg">
    
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,119
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Zygoma View Post
    why do i have to add padding to a background image on another image element for it to show.
    You don't have padding on a background image. You have placed padding on an image. A background image on an image doesn't make much sense, unless you put some padding on the image, so that the background can show through. A background image shows up in the padding area of an element. An image doesn't have padding around it by default. <img> is a 'replaced' image, meaning that the image is inserted on the page where you tell it to go. It fills that space, and that's it.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Morning guys (GMT Time) :-)

    Thank you v much for getting back to me. Ive ran through the Ron Pat experiment http://tutorial.davidclick.com/ronpat-experiment.html
    http://i216.photobucket.com/albums/c...ps1cd3d642.jpg

    v helpfull, thank you
    David

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Quote Originally Posted by ralph.m View Post
    A background image on an image doesn't make much sense, unless you put some padding on the image, so that the background can show through.
    Or if your image has transparent areas...


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
  •