SitePoint Sponsor |
|
User Tag List
Results 1 to 16 of 16
-
Feb 26, 2003, 09:03 #1
- 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
-
Feb 26, 2003, 10:02 #2
By vertical gradient, do you mean color fading from top to bottom?
-
Feb 26, 2003, 10:09 #3
- Join Date
- Feb 2003
- Location
- Belfast
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
Brian
-
Feb 26, 2003, 10:10 #4
- 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
-
Feb 26, 2003, 10:14 #5
- 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
-
Feb 27, 2003, 05:32 #6
- Join Date
- Feb 2003
- Location
- Belfast
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by TheOriginalH
So its not possible to do yet?
Brian
-
Feb 27, 2003, 06:28 #7
- Join Date
- Dec 2002
- Location
- Switzerland
- Posts
- 735
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by leftofcentre
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
-
Feb 27, 2003, 07:30 #8
- 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!
-
Feb 27, 2003, 18:10 #9
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
Originally Posted by leftofcentre
-
Feb 28, 2003, 06:44 #10
- Join Date
- Feb 2003
- Location
- Belfast
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by quenting
Thanks to all who got back to me.
Brian
-
Feb 28, 2003, 07:39 #11
- 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>
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
-
Feb 28, 2003, 13:23 #12
- 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 meI 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
..
-
Mar 1, 2003, 04:53 #13
- Join Date
- Dec 2002
- Location
- Switzerland
- Posts
- 735
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by leftofcentre
http://www.archangelcastle.com/test/example.html
Quentin
-
Mar 1, 2003, 06:38 #14
- Join Date
- Jul 2001
- Posts
- 284
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is probably an IE only thing...
http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm
-
Mar 2, 2003, 08:35 #15
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
-
Mar 5, 2003, 09:37 #16
- 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