SmartFloat stack

Simple Background Gradient Stack

show a gradient or solid color on the background

Find a solid color as a background is too plain, and you don’t want a full page background image or a tiled image, why not consider a gradient?

As you can see, the stack is used on this page, resulting in a radial gradient background.

Just drag one copy of the stack into the page, choose the background type, direction and colors. Because gradients on the background are not adequately supported by Internet Explorer 9 and worse, a fallback to a solid color will be used for these browsers. You can set the fallback color separately1.

This stack offers six options for the background:

horizontal gradient

vertical gradient

diagonal ↘ gradient

diagonal gradient

radial gradient

solid color

This stack is based on a suggestion made by a customer. Setting a full page background gradient that works with every browser is a chore, so making a stack for it was indeed a good idea.
The CSS for the gradients in this stack is based on that of ColorZilla’s Ultimate CSS Gradient Generator.
Tip: are big parts of your background covered with solid color items? My free SetOpacity Stack can usually make them semi-transparent.
As said, in Internet Explorer 9 and worse, a fallback to a solid color (which you can set separately) will be used2.
The background gradient is fixed (i.e. it will not scroll with the rest of the content of the page). Without being fixed, there’s no way to make the gradient look good on long pages.
In some themes, the background is (partially) covered by non-transparent elements. Obviously, the gradient will not be (fully) shown in those themes.

Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].

  1. Tip #1: it is often a good idea to make the fallback color a mix of the two colors of the gradient. Eric Meyer’s excellent Color Blender makes it really easy to find this color (just set midpoints to 1).
  2. Tip #2: to see the fallback color in action in RapidWeaver preview mode, select solid color in the stack and set the color there too.
Simple Background Gradient HUD
© 2012-2018 Marathia Web Design | Contact