Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Background color
- Thread starter gxydas
- Start date
how do you want to use the 2 colours?
squares, columns, horizontal stripes?
Need more info.
Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
squares, columns, horizontal stripes?
Need more info.
Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
- Thread starter
- #3
You want a gradient between the colours going ffrom, say, blue to green?
Or, for example, a blue area with a green area beneath it?
Please have a go at actually outlining what you want to do.
It makes it much easier to give you an answer.
Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
Or, for example, a blue area with a green area beneath it?
Please have a go at actually outlining what you want to do.
It makes it much easier to give you an answer.
Foamcow Heavy Industries - Web design and ranting
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
I wonder what possesses people to make those animated gifs. Do you just get up in the morning and think, "You know what web design r
To make a gradient, the technique I've seen and used, is to create a small 1px wide graphic, as tall as you deem necessary, that contains the gradient. Set the background color of the body or main container tag to the color you wish to "end up with". Set the background image to be at the top, fixed, and repeat horizontally.
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
Thomas D. Greer
Providing PostScript & PDF
Training, Development & Consulting
- Thread starter
- #6
Take a look on
left to right
top to bottom
Code:
<style>
body{filter:progid:DXImageTransform.Microsoft.gradient(gradientType=1,startColorStr=purple,endColorStr=green)}
</style>
Code:
<style>
body{filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorStr=purple,endColorStr=green)}
</style>I strongly suspect that that may be IE specific ![[smile]](/data/assets/smilies/smile.gif "[smile] [smile]")
________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
You'd be right, when it comes to avoiding adware, spyware and home page hijacking along with a whole host of other things you wouldn't want your browser to have anything to do with I'd go with FireFox all the way but unfortunately FireFox and all other browsers don't come close to IE's ability to use styles, especially filters. Hopefully FireFox will soon catch up.
You can do some nifty things with MS filters, but you don't need them here. tgreer has posted a simple cross-browser solution to the problem above.
Say you want a vertical gradient.
Make an image in your favorite graphics program, 1 pixel wide, say 400 pixels high, gradient filled from blue to green (hideous combination, but you get the idea). Let's call it grade.gif.
Now you apply some CSS to the <body> of your page. Best to do it in a stylesheet, but I'll illustrate it inline:
That makes the whole background green, but then smears our blue-to-green image across the top, giving the gradient effect.
I'll leave it to you to figure out how to use other colours or to make it a horizontal gradient.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
Say you want a vertical gradient.
Make an image in your favorite graphics program, 1 pixel wide, say 400 pixels high, gradient filled from blue to green (hideous combination, but you get the idea). Let's call it grade.gif.
Now you apply some CSS to the <body> of your page. Best to do it in a stylesheet, but I'll illustrate it inline:
Code:
<body style="background: #0f0 url(grade.gif) top left repeat-x">I'll leave it to you to figure out how to use other colours or to make it a horizontal gradient.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Thread starter
- #13
- Status
Similar threads
- Locked
- Question
- Locked
- Question