SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Belfast
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    can you do gradient page backgrounds?

    Hi I was wondering is there anyway to do gradient backgrounds on a webpage?

    I would like to a do a vertical grandient as the background of a webpage. I know you could use a tiled background but the pages are of various lengths, so I would prefer to use a code solution.

    Can you do it with CSS?

    Thanks in advance.

    Brian

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    By vertical gradient, do you mean color fading from top to bottom?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Belfast
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    By vertical gradient, do you mean color fading from top to bottom?
    Yes. You have a solid colour at the top and it fades as you go down the page.

    Brian

  4. #4
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'd guess if you had a div with a coloured background of specified size you could use the alpha transparency filter to create the effect? It is just a guess though, may have a play...
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This has been discussed on the w3 - as long as 3 years ago: http://lists.w3.org/Archives/Public/...9Jan/0055.html
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Belfast
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheOriginalH
    This has been discussed on the w3 - as long as 3 years ago: http://lists.w3.org/Archives/Public...99Jan/0055.html

    So its not possible to do yet?

    Brian

  7. #7
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leftofcentre
    So its not possible to do yet?

    Brian
    What i do is use a 1pix wide gif (of the height of the gradient i want to use). 1pix wide gifs are light even for large heights.
    Then set it as background image, repeat-x and no-repeat-y (or the contrary). Finally set the background color to the "bottom" color of your gradient so that it doesn't make a break with the rest of your page if the window is too big for the size you defined for your gradient.

    Quentin

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    Belfast
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by quenting
    What i do is use a 1pix wide gif (of the height of the gradient i want to use). 1pix wide gifs are light even for large heights.
    Then set it as background image, repeat-x and no-repeat-y (or the contrary). Finally set the background color to the "bottom" color of your gradient so that it doesn't make a break with the rest of your page if the window is too big for the size you defined for your gradient.

    Quentin
    Hi quentin would it be possible to see your code or could you post a link to the page?

    Thanks to all who got back to me.

    Brian

  9. #9
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The code would be:
    Code:
    <style type="text/css">
    body {
      background-image: url(gradient.gif);
      background-color: black;
      background-position: top left;
      background-repeat: repeat-x;
    }
    </style>
    In this example, gradient.gif would be a file with a width around 10 pixels and a height of, say, 800 pixels. The image should be a gradient fill ending with black at the bottom, to match the background color defined in the style sheet.

    Positioning the background to the top-left of the window ensures that it will tile correctly in Netscape 4 and Internet Explorer 4, which do not support tiling to the left of the background position.
    Kevin Yank
    CTO, sitepoint.com
    I wrote: Simply JavaScript | BYO PHP/MySQL | Tech Times | Editize
    Baby’s got back—a hard back, that is: The Ultimate CSS Reference

  10. #10
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leftofcentre
    Hi quentin would it be possible to see your code or could you post a link to the page?

    Thanks to all who got back to me.

    Brian
    simple example here:
    http://www.archangelcastle.com/test/example.html

    Quentin

  11. #11
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One proviso with the method descibed by quenting is that you should be aware of loading time when you use a 1px wide gif. Personally I would choose a gif at least 10px wide. That way you are cutting the number of times the browser has to load the same image by 10 times. Even though the resulting image is larger, doing this CAN speed up page loading.

    Just a thought.

    And in answer to your question, the gradient-fill property isn't in the CSS specs yet. Maybe slated for CSS3, but I wouldn't know. And even if it is, that doesn't mean it'll be properly supported by browsers for years!
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  12. #12
    SitePoint Member Lexi's Avatar
    Join Date
    Feb 2003
    Location
    USA
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just did a gradient going across the page but had gotten a tiling effect
    I'd made a 400 width image and then a 25pix width image ...the latter is what tiled badly.....until someone told me how to fix it....
    Make your gradient the size you want it to go down the page....where it ends take a color picker and pick the last color on the bottom edge of that gradient and use it for a smaller tiling image or just use it as a hex color in your code so half the page or so would be your gradient then the rest would be the matching color....
    I'm sure if I can do this horizontally you can do the same vertically
    Check out my images here
    http://georgiainc.net/almaden_valleytest.html


















    Quote Originally Posted by leftofcentre
    Hi I was wondering is there anyway to do gradient backgrounds on a webpage?

    I would like to a do a vertical grandient as the background of a webpage. I know you could use a tiled background but the pages are of various lengths, so I would prefer to use a code solution.

    Can you do it with CSS?

    Thanks in advance.

    Brian

  13. #13
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a header with an image.png
    This png format was made with a gradient black-2-transparent. On the background of that image I use a bg-color-style, which shines through if you use a browser of the gecko-type. IE replace the transparency with color #C1CACF by the way.

    You should see spiderman twice if you browse with gecko/opera to my site: www.ict-id.nl

    It's damn kewl, if you ask me I hope this PING thing will work soon on IE.

    cheers!


    PS on that page you find another example of gradient bg (look for the turtle)
    Last edited by wisbin; Feb 28, 2003 at 13:28.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  14. #14
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, a vertically fading gif (top > bottom) will be lower in 'weight' than a horizontally fading gif (left > right).

    Due to the way the gif image data is built, compressed and stored, horizontal bands are better suited to its compression methods than vertical bands.
    Consequently, vertically fading gifs should remain reasonably small as the image data will be compressed 'with the grain' rather than against it, so to speak.

    Just thought I'd throw that possibly useless/useful piece of information in.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  15. #15
    SitePoint Member
    Join Date
    Oct 2002
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When svg support is wide spread, it will be a snap.


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
  •