Results 1 to 4 of 4

Thread: webpage Gradient fill like this site

  1. #1
    Join Date
    Jun 2006
    Location
    Horsham, UK
    Beans
    432
    Distro
    Ubuntu 7.04 Feisty Fawn

    webpage Gradient fill like this site

    Hi all,

    this maybe the wrong place and possible a daft question... but does anyone know how to do a background image gradient fill like this site does please? I understand I could create an image the size of the page and have that tile across but thats poop..

    This site fades no matter how long the page is...

    I have tried googling it but didn't find anything meaningful (could be BAD googler)!

    Thank you for your help

  2. #2
    Join Date
    Jun 2005
    Location
    Baltimore, MD.
    Beans
    99
    Distro
    Kubuntu 7.04 Feisty Fawn

    Re: webpage Gradient fill like this site

    Looking at the stylesheet, it appears that they've done exactly what you proposed - create a 1px wide background image of the gradient (http://ubuntuforums.org/imagesorig/ub2/bgrepeat.jpg) which is tiled across the top of the page, and set the background color of the page to match the bottom color in the gradient.
    Laptop: Inspiron 600m, Pentium-M 1.6, 1GB RAM, Ubuntu Intrepid.
    Desktop: Athlon64 3000+, 2x6600GTs, 2GB PC3200, M-audio Delta1010, Debian Etch
    HTPC: P4 3.0, 512MB RAM, 7300LE, PVR-350, PCHDTV-5500, Mythbuntu Hardy.

  3. #3
    Join Date
    Jul 2007
    Location
    /europe/serbia/novi sad
    Beans
    263
    Distro
    Ubuntu 7.04 Feisty Fawn

    Re: webpage Gradient fill like this site

    <html>
    <head>
    <style type="text/css">
    body{background-color:#000000; background-image:url('a.jpg'); background-repeat:repeat-x}
    </style>
    </head>
    <body>
    blah, blah
    </body>
    </html>

    This is exemple how I would do this with CSS. You can place CSS script in head section of page.

    background-color define color of background in hex (in my case it's white color)

    background-image define link to the image (in my case it's a.jpg in same directory like html page)

    background-repeat define tipe of tiling (in this exemple it's horizontal)

    a.jpg is picture compress on 40% (minimum for good looking web compression). Width is 1px and height is 800px.
    If you need horizontal gradient you could use picture w:1024px, h:1px. Set background-repeat:repeat-y.

  4. #4
    Join Date
    Jun 2006
    Location
    Horsham, UK
    Beans
    432
    Distro
    Ubuntu 7.04 Feisty Fawn

    Re: webpage Gradient fill like this site

    wicked.. Thanks for the help

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
  •