: Same looking gradient on different heights in photoshop I have this site Site Link where I use gradients on the background. When you for example switch between site "Leistungen" & "Referenzen"

@Kevin459

You should create it using css.

Then have a repeating background-image fallback with IE conditional comments.

Vote Up Vote Down

@Reiling762

What you would normally do in web is use a 'partial' gradient with a fixed height, and then a background color taken from the last line of your gradient:



The HTML for it would be (as Joonas mentions in his comment) something like:

html {
background: #e1e1e1 url('http://i.stack.imgur.com/bzWkL.png') repeat-x;
}


If you have more than one gradient, you probably need more than one image. You can use the gradient in any direction, so as long as you position the gradients (using position absolute, probably) you can create more 'levels' inside the page:



body {background-color: #e6bfb6 ;}
.gradient1 {background-image: url(gradient1.jpg); height: 100px; position:absolute; top: 0px}
.gradient2 {background-image: url(gradient2.jpg); height: 100px; position:absolute; top: 40%;}
.gradient3 {background-image: url(gradient3.jpg); height: 100px; position:absolute; top: 90%;}

Vote Up Vote Down