SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS shorthand rule

    I am following a tutorial on CSS and they seem not to explain some shorthands in details. I need an understanding on this particular rule;

    #item1 {background: #e4ccd7 url(images/phone.png) repeat-x 0 100%; }

    What does the last two declarations mean "0 and 100%"?

    Someone please explain.

    Thanks.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That declaration is equivalent to the following,
    Code CSS:
    #item1 {
      background-color: #e4ccd7;
      background-image: url(images/phone.png);
      background-attachment: scroll; /* initial value */
      background-repeat: repeat-x;
      background-position: 0 100%;
    }

    The last declaration (background-position) says the image will be aligned 0 pixels from the left edge of the element and 100% from the top edge. In other words, it's equivalent to background-position:left bottom.

    The first number is the horizontal position and the second number is the vertical position. If only one number is given it specifies the horizontal position and the image will be vertically centred.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    That declaration is equivalent to the following,
    Code CSS:
    #item1 {
      background-color: #e4ccd7;
      background-image: url(images/phone.png);
      background-attachment: scroll; /* initial value */
      background-repeat: repeat-x;
      background-position: 0 100%;
    }

    The last declaration (background-position) says the image will be aligned 0 pixels from the left edge of the element and 100% from the top edge. In other words, it's equivalent to background-position:left bottom.

    The first number is the horizontal position and the second number is the vertical position. If only one number is given it specifies the horizontal position and the image will be vertically centred.

    Understood. Thanks.


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
  •