momonja
asked on
Background Gradient
How could I go about making a gradient background for my webpage? I would like it to start off with the colour #989489 and end with #C7C4BB. Does anyone know how to simulate one that would fill the whole page?
third
an image can easily do that. create a 1 pixel width image (the height should depend on the screen size you want) then set it as horizontally repeating (repeat-x) background image of your page.
This is IE only solution...
What you are asking for is impossible to do in other browsers unless you do tiled gradient image
<style>
.bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#989489;
filter: alpha(OPACITY=100,FINISHOP
z-Index:1;
}
.content {
position:absolute;
top:0;
left:0;
z-Index:10;
}
</style>
<body bgcolor="#C7C4BB">
<div class="bg"></div>
<div class="content">
Put page content here
</div>
</body>
What you are asking for is impossible to do in other browsers unless you do tiled gradient image
<style>
.bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#989489;
filter: alpha(OPACITY=100,FINISHOP
z-Index:1;
}
.content {
position:absolute;
top:0;
left:0;
z-Index:10;
}
</style>
<body bgcolor="#C7C4BB">
<div class="bg"></div>
<div class="content">
Put page content here
</div>
</body>
IE only solutions suck and keep your CSS from validating.
Currently, a one pixel tall, very wide background image is your only option.
In a few years you can set your background to be an SVG image to get your desired effect, since SVG support gradients.
http://www.w3.org/TR/SVG11/pservers.html#Gradients
Example: http://www.w3.org/TR/SVG11/images/pservers/lingrad01.svg
Currently, a one pixel tall, very wide background image is your only option.
In a few years you can set your background to be an SVG image to get your desired effect, since SVG support gradients.
http://www.w3.org/TR/SVG11/pservers.html#Gradients
Example: http://www.w3.org/TR/SVG11/images/pservers/lingrad01.svg
ASKER
isn't there any better way...?
if you want to support x-browser then my suggestion which is a gradient image is your only choice.
Gradient image is the only crossbrowser solution as long as IE is the only browser that is (almost) fully CSS2 compliant.
ASKER
oh well... thanks i guess...
Dear expert(s),
A request has been made to close this Q in CS:
https://www.experts-exchange.com/questions/20603255/Please-delete-this-question.html
Without a response in 72 hrs, a moderator will finalize this question by:
- Saving this Q as a PAQ and refunding the points to the questionner
When you agree or disagree, please add a comment here.
Thank you.
modulo
Community Support Moderator
Experts Exchange
A request has been made to close this Q in CS:
https://www.experts-exchange.com/questions/20603255/Please-delete-this-question.html
Without a response in 72 hrs, a moderator will finalize this question by:
- Saving this Q as a PAQ and refunding the points to the questionner
When you agree or disagree, please add a comment here.
Thank you.
modulo
Community Support Moderator
Experts Exchange
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.