CSS - "How'd they do that?"

Discussion in 'Web Design and Development' started by bbarnhart, Jan 1, 2009.

  1. bbarnhart macrumors 6502a


    Jan 16, 2002
    On http://www.apple.com/mac in the 'Get a Mac' column, the left and right borders are images. It's not clear to me how they got two background images to work or how they pushed one of the images to the right to form the right border. Any ideas?
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    Using FireBug I found 3 spots where they declare, using the background property, a tall single pixel wide graphic. These work together to get the two borders. They are located in file mac.css on lines 32, 33, and 34 if you want to take a closer look. Hope that helps.
  3. mxptt macrumors member

    Aug 9, 2008
    they can either do that using the border background property or the lazy way which would be three divs all floated left making the outer two only 1 pixel wide with the repeated image to create the border effect ...
  4. bbarnhart thread starter macrumors 6502a


    Jan 16, 2002
    I figured out how they accomplished it. Basically, a 150 x 1 transparent image with a single pixel on the left and right. This image is then repeated in the x plane as a background image. I couldn't see the solution at first because when I looked at this graphic, I could not see that the image was only two pixels.

Share This Page