I am using a gradient that looks great on my page. If you resize the browser the gradient changes to match perfectly. But, if you scroll the page down to view the contents, the gradient begins to repeat itself, ignoring my background-repeat: no-repeat rule.
Is there a way to have the gradient match the height of a page when scrolling without repeating itself?
Thanks!
Try throwing in the !important syntax see if that works…
Are you using an image for the gradient or CSS3?
A common practice to do is get the final color of the gradient at the bottom and then set the background-color to that color. So in effect once the gradient stops it picks up the background color.
Otherwise height:100vh; might do it, not too sure though.
Example with CSS3 - http://jsfiddle.net/sLv86kqL/
Thanks for your suggestion.
I finally did get the no-repeat rule to work, but now when I scrool the page I see the gray background color instead of the gradient. Perhaps gradients only match the size of the browser and not what is below the visible browser height.
Thanks again for your help.
Another option is to use CSS gradients.
EDIT: this post was updated to include code from post #19 below, which gives a definitive answer.
That is precisely what I am trying to do and I am using CSS. However, I plugged your markup into my body element and it still began repeating itself when I scrolled the content. That, I suspect, is because the .png image in your pen example does not exist in my images folder.
Do you know the dimensions of that .png?
I can make my own .png in Ps, but would be great to know the dimensions I should be working with.
Thanks again for your rock-solid help.
Actually, there is no .png in there. I just copied a bunch of code from CSS-tricks that included that image as an example of a fallback, but it’s not actually linked to the example. The gradient you are seeing in the Pen is pure CSS.
Could you perhaps make up your own Pen with the code you are using?
Thanks for your post.
I tried your markup and the gradient you provided began to repeat itself as well.
I appreciate your help. CSS is a bottom-less pit, but no pain, no gain.
Thanks again.
Ok here is my code:
HTML:
<div class="majorContent">
...
</div> <!-- /end of .majorContent class -->
CSS:
body {
font-size: 100%;
font-family: "Source Sans Pro", sans-serif;
/* from Ralph -------------------------- */
color: white;
/* https://css-tricks.com/examples/CSS3Gradient/ */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
.majorContent {
font-size: 1.1em;
/*font-family: "Source Sans Pro", sans-serif;*/
font-family: "Times New Roman", serif;
color: rgba(2, 23, 37, 0.9);
letter-spacing: 1px;
line-height: 1.3em;
width: 90%;
max-width: 900px;
background-color: #D8D8D8;
margin: 0 auto;
padding: 2% 5% 5% 5%;
text-align: justify;
border: 10px solid #C0C0C0;
}
I’m going to try and put this page online then you will be able to see how it actually repeats.
Thanks!
Edited with code tags
Post your code which it isn’t working in.
Here is the link to the page which is now online: http://www.pabriles.com/handTools.html
You will have to excuse the CSS bloat as it is still not ready for prime-time.
Thanks!
Remove the height set on the body.
html, body {
height: 100%;
}
Edit to clarify: Line 162 in majorStyle.css
Got it! Thanks a MILLION for your help. I changed it and worked perfectly.
Pizza’s on the way.
I sicerely appreciate your help.
Question: I am assuming that - height: 100% - refers to the height of the browser and not what is below it. Is that correct? Thanks!
All good, keep up with the learning.
Yes it refers to the browser height being 100% if you set html (this is the whole document). Some more information about it can be found here - http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height
As much as I truly enjoy learning HTML/CSS there are a lot of 100% this and 100% that rules that get a bit confusing, to me anyhow. I have a ton to learn, but could never advance without the help of individual’s such as yourself and other’s in this forum you give so freely of their time and expertise.
Thank you once again for all of your time and advice.
No problems. I wouldn’t specify a height on anything unless absolutely necessary but that’s just me.
I’ll remember that bit of good advice. I also just documented what I learned here today in my folder .doc.
Live and learn. Thanks!!
That’s not quite right as height:100% on the body is often misunderstood. If you have a wrapper div in the page that you want to set to height:100% (e.g. for a sticky footer approach) then you must set html and body to height:100% (not required for the new vh units although some older versions of webkit still needed the fix below to work properly).
html,body{height:100%}
If you set body to min-height:100% instead of height:100% (as mentioned in the link above) then the first wrapper in your page cannot inherit any height from a min-height element and will be height:auto. Therefore the rule must be as above unless you are using the body element as your first page wrapper (which is fine for modern browsers but historically caused problems in older versions of IE and even modern versions of IE zoom incorrectly when the body is used as sized wrapper). For the sake of all those bugs then one extra wrapper is worth the price to pay.
The problem with using html,body{height:100%} only really occurs when using linear gradients on the body because the gradient will only stretch to 100% of the viewport and will not wrap the content should it go below the fold (this doesn’t happen with background images or colors).
In the page above ( http://www.pabriles.com/handTools.htm) with the 100% height removed the gradient now encompasses the content however if you shorten the content to a few lines you will see that the gradient now repeats from the bottom of the content rather than stretching down to the bottom of the viewport. This is not a nice effect and probably not what was wanted.
There are two methods to overcome this and one would be to set html to have a min-height of 100%.
html{min-height:100%}
This would allow the gradient to reach the bottom of the viewport on short content pages but also to keep track with the content as required. Unfortunately this does raise another issue in that on very long pages the gradient becomes stretched all the way down the page and so may not seem like much of a gradient at all.
My preferred approach is the set html and body to height:100% and then set the background-attachment to fixed on the body element which means the gradient will only ever be as tall as the viewport but of course will not scroll away. This means you get a full height gradient at all times no matter how much content you have.
As far as height:100% itself goes then you only need to understand that for an element to have its height defined in percentage means that the parent of that element has either a fixed height in pixels/ems/% (min or max-height is no use). However if the parent has its height in percentage also then the same rules apply for that parent and the unbroken chain of heights needs to be maintained right back to the root element.
In most cases height:100% is unnecessary and unwanted. The only time you really want to use it is on the html and body elements and only then if you want 100% high element in your page to start with (or for the linear gradient fix I gave above). Most other times you don’t need it.
Also note that when you set an element to height:100% then it remains at 100% height and cannot grow with content (unless it is display:table). Effectively this is what happens to the html and body element when we set height:100% and the content just overflows the body. This usually has no ill effect because backgrounds are still propagated below the viewport even with the height:100% set (except for linear gradients which seem to abide by their own rules).
It is well worth understanding the implications of height 
Thanks for the indepth explanation.
I have pasted your post into my CSS log book for future reference. As you noted so succinctly, the height: 100% is confusing to say the least. I have not fully grasped all that you have noted, but I will in time. None of this would have mattered to me had I not wanted to use a gradient in my new website. That said, i am very glad I did because, once again, I have learned a lot in this forum.
Thanks again for an extremely informative post.