Menu icon Foundation
How to Add Gradient Background in Rails

Hi,

I installed the framework with 'foundation-rails' GEM. It has generated a 'foundation_and_overrides.scss' file.

I would like to add a gradient background system-wide. The code and background that I would like to add is below. How can I do this?

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 504, color-stop(0, #5D87B0), color-stop(0.6, #2F4459));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center, #5D87B0 0%, #2F4459 60%);

ruby on railsgradient

Hi,

I installed the framework with 'foundation-rails' GEM. It has generated a 'foundation_and_overrides.scss' file.

I would like to add a gradient background system-wide. The code and background that I would like to add is below. How can I do this?

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 504, color-stop(0, #5D87B0), color-stop(0.6, #2F4459));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle farthest-corner, #5D87B0 0%, #2F4459 60%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center, #5D87B0 0%, #2F4459 60%);
Rafi Benkual over 4 years ago

You can add these at the bottom of foundation_and_overrides.scss