Gradient Background Repeating

Question

I have some trouble with a website I'm making for a school project. I have a gradient background but it repeats vertically, it is especially noticeable when you zoom out. Here's a photo: repeating background

Here's the code for the css (I'm guessing this is where the problem originates):

html {
 background: #45aa99; /* Old browsers */
 background: -moz-linear-gradient(top,  #10aaff 0%, #2288aa 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,10aaff), color-
                                         stop(100%,#2288aa)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #10aaff 0%,#2288aa 100%);  
                  /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #10aaff 0%,#2288aa 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #10aaff 0%,#2288aa 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #10aaff 0%,#2288aa 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#10aaff', 
                 endColorstr='#2288aa',GradientType=0 ); /* IE6-9 */
 }

I would like the webpage to gradient for the entire length of the site no matter the zoom. Any idea how to do this? Thanks!

Ps here's the pastebins to the full html and css: html: [link](http://pastebin.com/mqBnUhv9) css: [link](http://pastebin.com/2wS10X4K) — chef stu, Mar 01 '17 at 17:56

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

you're looking for background-repeat: no-repeat;

you can also specify the width and height of the background as follows:

background-size:100px 100px; /* width & height */

Here is a LINK for more descriptive info about it.

edited May 23 '17 at 11:53

Community

1
1

answered Mar 01 '17 at 17:57

Ousmane D.

54,915
8
91
126

this sort of worked. instead of repeating the gradient it just ends and leaves white for the rest of the page (http://imgur.com/a/6gfkB). Is there a way to expand the gradient to fit the entire web page for any levels of zoom? – chef stu Mar 01 '17 at 18:02
@chefstu i will update my answer – Ousmane D. Mar 01 '17 at 18:04

score 0 · Answer 2 · answered Mar 01 '17 at 18:00

0

Set html to height:100%; You can lose the 0% - 100% in the background css.

So (simplified without alt-browser options, for clarity):

html, body {
  height:100%;
  background: linear-gradient(to bottom,#10aaff,#2288aa); /* W3C */
}

answered Mar 01 '17 at 18:00

Ben Paddock

273
1
7

Cool, glad that worked! Mind upvoting it/marking it as the answer? – Ben Paddock Mar 01 '17 at 18:13

score 0 · Answer 3 · answered Mar 01 '17 at 18:01

0

For gradient to stretch the entire height of the page:

html {
    min-height: 100%
}

Additionally for no repeat of color on either of x axis or y axis ; that is; horizontally or vertically; use;

body {
    background-repeat: no-repeat;
}

answered Mar 01 '17 at 18:01

Ajay Bisht

585
6
8

Gradient Background Repeating

3 Answers3