I have this site Site Link where I use gradients on the background. When you for example switch between site "Leistungen" & "Referenzen" you will see that the background darkness from the gradients on the top is getting darker or brighter (when switching between the two pages) because of the different heights of the two pages. Now my question is how I can use such gradients in photoshop to have the same look on different heights because actually the gradient is stretching when having smaller or bigger heights?
asked Jun 13, 2013 at 10:13
-
Are you asking for in photoshop or for your website?– RyanCommented Jun 13, 2013 at 10:32
-
I use photoshop for my website. So in photoshop for the website.– Daniel HernandezCommented Jun 13, 2013 at 10:37
Add a comment
|
2 Answers
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('https://i.sstatic.net/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%;}
You should create it using css.
Then have a repeating background-image fallback with IE conditional comments.
