Problems with background gradient

**Tahoeporter** · Mar 29, 2011 22:25

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?

**dresden_phoenix** · Mar 29, 2011 23:00

I could not see the source of the ink you posted
but it could be one of the following issues:

1) you have the BG image set to repeat, instead of repeat-x
2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}
3) you didnt mat the background color to the color of the end of your gradient

**Tahoeporter** · Mar 29, 2011 23:16

Originally Posted by dresden_phoenix

I could not see the source of the ink you posted
but it could be one of the following issues:

1) you have the BG image set to repeat, instead of repeat-x
2) you set html{height:100%;} (note you need "{" and "}" ) but not html, body{height:100%;}
3) you didnt mat the background color to the color of the end of your gradient

Not sure I follow any of that. but i really appreciate the reply.

this is the code i am using:

Code CSS:

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

**dresden_phoenix** · Mar 30, 2011 01:21

try this:

Code:

<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

**Tahoeporter** · Mar 30, 2011 09:13

I put this in :

Code CSS:

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

**dresden_phoenix** · Mar 30, 2011 14:32

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....
1) takes one color for the start of the gradient and another for the end .
2) calculates the height of the element ( based on the content)
3) creates the gradient ( color changes) to make the fill effect.

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

**Tahoeporter** · Mar 30, 2011 14:59

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

**dresden_phoenix** · Mar 30, 2011 17:27

Code:

<!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.

**Tahoeporter** · Mar 30, 2011 17:34

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

**Paul O'B** · Mar 31, 2011 04:41

You didn't add the rule that Dresden mentioned.

Code:

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:

Code:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#838357', endColorstr='#DCDCDC'),;

**Tahoeporter** · Mar 31, 2011 09:53

Originally Posted by Paul O'B

You didn't add the rule that Dresden mentioned.

Code:

html{background-color:#dcdcdc}

That will fix it in Firefox at least .

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

**Paul O'B** · Mar 31, 2011 10:45

Ok No problem

User Tag List

Thread: Problems with background gradient

Thread Tools

Display

Problems with background gradient

Bookmarks

Bookmarks

Posting Permissions