SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how is this image hidden?

    Ok there is an image in the background for a UL and part of it is hidden if I increase the bottom from 30px to 70px padding I see more of the image that is 365px in height. I don't know how this works hiding the background image or why I see more of it with the padding??

    Code:
    ul { margin : 0;
    padding : 0 20px 30px 20px;
    background : url(../images/ul.png) no-repeat 0 100%; }
    also on the last line what is thew no-repeat 0 100% stand for. I now no-repeat means no repeat but what is the 0 and 100%?

    thanks
    Last edited by keano; Nov 26, 2007 at 01:46.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A background image will be clipped if it's larger than the element to which it is attached.

    The background property is a shorthand property that sets 5 properties at one:
    • background-color
    • background-image
    • background-repeat
    • background-attachment
    • background-position


    The 0 100% is the background position. The left edge of the background image is positioned 0 pixels from the left edge of the element, and the bottom edge of the image is positioned 100% from the top edge of the element. In other words, the bottom left corner of the image is anchored at the bottom left corner of the element.

    Another way to write that property would be
    Code CSS:
    background:url(../images/ul.png) no-repeat left bottom;

    It's equivalent to the following declarations:
    Code CSS:
    background-color:transparent;
    background-image:url(../images/ul.png);
    backgorund-repeat:no-repeat;
    background-attachment:scroll;
    background-position:left bottom;
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you mkaes much more sense now.


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
  •