CODEWITHSUNDEEP
csscolorsbackgroundgradient
Billa
Billa

Reputation: 2039

CSS - How to set gradient color background for different heights

I want to use a linear gradient background color for a website. For example the gradient color starts from header and ends to the footer. Now the problem is that, since different pages have different amount of content, so the height of the pages varies. So in that case how can I set ending point of the color? For example I want the gradient from #b68d4c to #f6e7cf.

Upvotes: 0

Views: 1513

Answers (2)

Damon Bauer
Damon Bauer

Reputation: 2726

Using an image: You'll need to figure out the shortest height of content that you want to cover. Then, in your image editor, create your gradient. Since it's linear, you can create it something like 10px wide by 500px tall (if 500px is the shortest height) and repeat it along the x-axis. Once your image is created, you would then write in your CSS:

body {
    background:#f6e7cf url(path/to/gradient.jpg) top left repeat-x;
}

Note: the #f6e7cf should be the finishing color of the gradient. What this does is if the page is taller than 500px, it will show the same color as the bottom of the gradient, giving it the illusion that it is continuing.

Using CSS3 As Ryan Casas pointed out, using the Colorzilla Gradient Editor is the most simple way to I've found (although, you don't learn as well because you aren't hand coding, but that's a different discussion). Essentially, you would put your two colors at 0% and 100%, ensure that it's going vertical, and copy the code into the body { } selector.

Upvotes: 1

Ryan Casas
Ryan Casas

Reputation: 666

Use % on the gradients. Here you have a generator: http://www.colorzilla.com/gradient-editor/

Upvotes: 1

Related Questions