Auto Stretching Linear Gradient Background To Any Browser Resolution

Discussion in 'HTML & Website Design' started by iBall, Mar 13, 2009.

  1. #1
    Hi,

    I could find a answer after google a several times:(

    Anyone know how to let the background looks like http://www.vbulletin.org

    No matter how you reduce or increase the browser resolution, it is still showing perfectly by auto scaling and stretching.

    After i checked, it is using a single jpg file as the background
    http://www.vbulletin.org/forum/images/cstyle/blue/bodybkgd950px.jpg

    so I'm wondering how it works by only stretching 2 end side and remain the center white colour part. and the site content has a fixed width.

    hope somebody could help me. thank you:)
     
    iBall, Mar 13, 2009 IP
  2. oakley56fila

    oakley56fila Active Member

    Messages:
    130
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Well, I can't say I know how they did it, but I had been wondering how this was achieved myself for awhile now so I set out to figure it out.. it was really quite simple.

    Basically a use of set pixel width, auto margins and a super wide gradient background repeating on the y axis and centered.

    PM me and I'll send you a link to my test page with the css and a sample of the background. If you don't understand after that, pm me again and I will explain in greater detail.

    hope this helps!
     
    oakley56fila, Mar 13, 2009 IP