SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2007
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background-position:?

    I have a gif image that will be used for the navigation background. The image has a height of 400 pixels and a width of 206 pixels.

    In this tutorial, we are asked to input the following CSS rules:

    #navigation a {
    text-decoration: none;
    text-transform: uppercase;
    display: block;
    background: url(assets/tabs.gif) 0-195px no-repeat;
    width: 200px;
    height 24px;
    color: #6b96b3;
    padding-left: 10px;
    padding-top: 11px;
    }

    #navigation a:hover {
    background-position: 0-300px;
    padding-top: 6px;
    height: 29px;
    }


    I do not understand the background-position: rule?

    0-300px; ? 0-195px; ? what do these values mean?

    Thank you all in advance for your thoughts and views.

    Kenneth

  2. #2
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kennethjaysone View Post
    0-300px; ? 0-195px; ? what do these values mean?

    Thank you all in advance for your thoughts and views.

    Kenneth
    Background positioning can be specified in a couple different ways (i.e pixels, percentages, and direction(top,right,bottom,left)). In your tutorial they specify using pixels. The first is the vertical positioning '0' relative to the top of the element and the '-300px' is the horizontal positioning relative to the left side of the element. So this actaully places your image -300px to the left of the element. The actual tab image has both states on it, so there is no need for preloading images, this allows you to slide the image into place on hover.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the first value, when defining two values for background position, is the horizontal one...

    As your example stands at the moment, it is invalid - there should be a space between the zero and the minus sign :
    Code:
     background: url(assets/tabs.gif) 0 -195px no-repeat;
    As the <a> is 24px high, and the background position is offset 195px upwards, then the <a> will display that portion of the background image between 195px and 215px from the top. The hover will display that portion between 300px and 324px from the top.

    I assume the image contains a number of different tab graphics and their associated rollover states (and possibly active states as well).

  4. #4
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Centauri View Post
    Actually, the first value, when defining two values for background position, is the horizontal one...
    Correct, I confused the two


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
  •