I cannot get the background gradient to work well on my site. It does not go far past the wrapper and on pages shorter than the viewport it looks wrong.
Here is a page with the problem. http://www.dsconstructiontahoe.com/resources
I tried putting html}height:100%;} and it put a solid line above the wrapper?
I could not see the source of the ink you posted
but it could be one of the following issues:
Not sure I follow any of that. but i really appreciate the reply.
this is the code i am using:
body{
background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
background: -webkit-gradient(linear, left top, left bottom, from(
#838357), to( #DCDCDC));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC');
}
I tried adding : body{height:100%;} but that did not help.
thanks
try this:
<style>
body{
background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
background-image: -webkit-gradient(linear, left top, left bottom, from(
#838357), to( #DCDCDC));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC');
;
}
html { background-color:#DCDCDC; }
html, body, p { margin:0}
</style>
.......
<body>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</body>
</html>
hope that helps
I put this in :
html { background-color:#DCDCDC; }
html, body, p { margin:0}
and it did this to the top of my body (a grey bar)
http://tinyurl.com/46zy9ly
I do not understand what to do twith all the other code (<body>
<p>aaa</p>) is that suppose to go on an individual style page for my resource page?
I am usingWordpress.
thanks
I used “<p>aaa</p>” to signify content, dont worry about keeping that. What you have to understand is the method you are using to generate a gradient BY NECESSITY does the following…
The reason you see the “gray bar” is because of margin collapse. That is, your first element inside the element of the has a margin-top >0.
this means is you have little content it will be BY NECESSITY a short dramatic color change, if your content is tall, it will be come a slow subtle gradient.
instead of this:html, body, p { margin:0}
do this:
1)look at the source code…
2) find the FIRST element inside the <body> with the gradient… ( it’s proably an H1 or H2… just make sure it’s the first element…)
3) give THAT element a margin-top:0;
lets say you see something like <body><h1 class=“whatever otherclass”>DS</h1>… What you need to do is :
html, body{ margin:0}
h1.whatever{margin-top:0}
that will get rid of the gray bar.
It’s difficult to tell you exactly what needs to be done w/o seeing the actual source code… but thats the basic concept
hmmm.
well on my “resources” page the first line is <h1> and i gave it a 0 margin-top and tried what you said but that did not do it.
I suppose I will keep messing with it and maybe just try to make the page bigger.
thanks for your help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body{
background-image: -moz-linear-gradient(top, #838357 , #DCDCDC);
background-image: -webkit-gradient(linear, left top, left bottom, from(
#838357), to( #DCDCDC));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357 ', endColorstr='#DCDCDC'); min-height:100%;
;
}
html { background-color:#DCDCDC; height:100%}
html, body { margin:0}
#wrap { width:80%; margin:0 auto; padding-bottom:1em } /* this centers your content*/
.notop{margin-top:0;}
</style>
</head>
<body>
<div id="wrap">
<h1 class="notop"> Sample Page header</h1>
<h2> Some content </h2>
<p> Because of the nature of your CSS3 genrated gradiesnt this is the best you can expect. the gradient genrates fron the top of the container to the bottom (how could it do it otherwise). Short conten will generate a short gradient, long content a long gradient. If you need a gradient of a specific height the best choice i still to use an image</p>
<p> more sample content. bare in mind that the gradient fade will still vary.. that is what a CSS3 generated gradient does. a pixel height gradient need to be made using an image. note that a px based gradient will also get trunked off if your conatiner is too short. </p>
</div>
</body>
</html>
maybe this will serve as a guide. I believe it does what you requested. just remember that CSS3 gradients are flexible, they will by design change with the since of your container. If what you need is a gradient that is always 100px high , for example , you are better off using an image bg.
thanks dresden,
I just padded the wrapper. I suppose it will mean that on smaller screens there will be a big blank scroll area?
If i get some time i will review all the info you gave me and see if i can get it to work properly.
I guess the one thing I would like to fix is that it still does not work at all in IE?
thanks
You didn’t add the rule that Dresden mentioned.
html{background-color:#dcdcdc}
That will fix it in Firefox at least .
It’s not working in IE because you have added a space after the hex colour value and before the closing quote.
Here is the corrected version:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357', endColorstr='#DCDCDC'),;
Thanks. that fixed the IE issue.
I did try the above html code and it put a solid bar above the wrapper. Dresden gave me some-other things to work on (removing margin on h1 elements) to remedy that and i have been trying to get that to fix it but no luck yet.
thanks
Ok No problem 