CSS - "How'd they do that?"

[bbarnhart]

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?

 

[angelwatt]

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.

 

[mxptt]

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 ...

 

[bbarnhart]

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.