Forums

Complex Gradient background Ends and then starts over again ( but no repeat command in css)

Permalink
This site was first started when I didn't know that much about css and html. ( still don't but now it's more than when I started!)
I am sure I've put some kind of div or tag or something somewhere in my code, months ago, that is making the body background too short for the whole layout of the site.

I used to have a manageable image file that worked, but I've been concerned about the load time for the site. (it's on HostGator) So I decided to take out the image file - that was on an x repeat and put in this code for the gradient. I took out the repeat, when I replaced that file with this new code.

I have the background gradient in the
" body " part of the standard Concrete5 plain yogurt theme.
It goes down for a percentage of the site and then starts over again.

hmmmmmm... I'm getting the feeling that the answer is in the percentage part. It changes as per the page and per the rescaling of the browser window.

If someone can point me in the right direction that would be appreciated.

I have the code for the background gradient here:

body {/* customize_background */ margin-top: 0px;
background: #c4c2c1; /* Old browsers */
background: -moz-linear-gradient(top, #c4c2c1 0%, #ffffff 9%, #ffffff 106px, #067ab5 106px, #067ab5 120px, #68abcd 200px, #f0efee 300px, #f0efee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4c2c1), color-stop(9%,#ffffff), color-stop(106px,#ffffff), color-stop(106px,#067ab5), color-stop(14%,#067ab5), color-stop(20%,#68abcd), color-stop(38%,#f0efee), color-stop(100%,#f0efee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* IE10+ */
background: linear-gradient(to bottom, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c2c1', endColorstr='#f0efee',GradientType=0 );
repeat: none; /* IE6-9 */}


the code came from Color Zilla:

http://www.colorzilla.com/gradient-editor/...

but I put in the px stops as I needed it to stop and start at defined points to match what is going on with the contents of the page.

looking forward to any ideas.
Regards,
Karen
PPPills
 
MichaB replied on at Permalink Best Answer Reply
MichaB
Hello PPPills,

I think you've got the right idea. It has something to do with the height of the body-element.

I added this style and it seems to work (tested in FF, Chrome, Safari on Mac):
html,body {height:100%;margin:0;padding:0;}


So the whole CSS-code for your aim is:
html,body {height:100%;margin:0;padding:0;}
body {
    /* customize_background */ 
      margin-top: 0px; background: #c4c2c1; /* Old browsers */ 
      background: -moz-linear-gradient(top, #c4c2c1 0%, #ffffff 9%, #ffffff 106px, #067ab5 106px, #067ab5 120px, #68abcd 200px, #f0efee 300px, #f0efee 100%); /* FF3.6+ */ 
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4c2c1), color-stop(9%,#ffffff), color-stop(106px,#ffffff), color-stop(106px,#067ab5), color-stop(14%,#067ab5), color-stop(20%,#68abcd), color-stop(38%,#f0efee), color-stop(100%,#f0efee)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* Chrome10+,Safari5.1+ */ 
      background: -o-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* Opera 11.10+ */ 
      background: -ms-linear-gradient(top, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* IE10+ */ background: linear-gradient(to bottom, #c4c2c1 0%,#ffffff 9%,#ffffff 106px,#067ab5 106px,#067ab5 120px,#68abcd 200px,#f0efee 300px,#f0efee 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c2c1', endColorstr='#f0efee',GradientType=0 ); repeat: none; /* IE6-9 */;
}


Regards
MichaB
PPPills replied on at Permalink Reply
PPPills
HI MichaB,
Thanks for getting back to me so quickly on Saturday.
I tried that option of putting in the :

html,body { height: 100%; margin 0; padding 0;}
and then the rest as it was....

but it does not seem to want to keep extending on the gray to infinity to the bottom. It starts over again.

For a little while, I thought it had something to do with my experimenting with an infinity footer a month or so ago, but the gradient does not stop / repeat just above the footer on the other pages. It's all over the place. It seems to be on a percentage of the overall page length.

I'm going to try
html,body { min-height: 100%; margin 0; padding 0;}



and see what that does....
Karen
PPPills replied on at Permalink Reply
PPPills
Ok.
that's not working....

I went back to Chrome and took a look at everything with the developers tools -
It really seems to be that the body is short. The gradient only goes to the end of the body. hmmmmmmmm.....

I went back and did this: 
html, body { min-height; 100%; margin 0; padding 0)


then the whole thing stretched out to the full length, no repeats. So that worked!
The gradient did a few odd ball things, but with some playing around with the stops and getting a rid of some percentages that I still had toward the beginning- the problem resolved itself.
So thank you so much for getting me on the right track! Really appreciate it.
Regards,
Karen