Menu icon Foundation
Add a linear background gradient

Hi,

I'm very new Foundation and I'm trying to add a linear background gradient to $body-bg:

it works if use the vendor prefix for chrome eg.

$body-bg: -webkit-gradient(linear, left top, right top, from(#FFF), color-stop(0.5, #808080), color-stop(0.5, #FFF), color-stop(0.5, #808080), to(#FFF));

but i cannot add the other prefixes for Firefox, IE and Opera.

I'm sure it something to to with mixins but so far I can't seem find out how to do it.

thanks

scssmixinsbackgroundgradient

Hi,

I'm very new Foundation and I'm trying to add a linear background gradient to $body-bg:

it works if use the vendor prefix for chrome eg.

$body-bg: -webkit-gradient(linear, left top, right top, from(#FFF), color-stop(0.5, #808080), color-stop(0.5, #FFF), color-stop(0.5, #808080), to(#FFF));

but i cannot add the other prefixes for Firefox, IE and Opera.

I'm sure it something to to with mixins but so far I can't seem find out how to do it.

thanks

chris over 5 years ago

No stress. found a solution.

added "padding: 3.125em 0 0 0;"

_global.scss

// Default body styles
body {
background: $body-bg;
color: $body-font-color;
padding: 3.125em 0 0 0;
margin: 0;
font-family: $body-font-family;
font-weight: $body-font-weight;
font-style: $body-font-style;
line-height: 1; // Set to $base-line-height to take on browser default of 150%
position: relative;
cursor: $cursor-default-value;
}

seems to work

Rafi Benkual over 5 years ago

Thanks for posting the solution Chris!

James about 5 years ago

I have the same question as the OP. Could someone post some code to show how you include all the different vendor prefixes??

Karl Ward about 5 years ago

For gradients, best is to employ tools like Bourbon or Compass so your code would be as simple as this:

@include linear-gradient(#111111, #333333);

For pure CSS, you might want to use a generator to create styles with vendor prefixes:
http://www.colorzilla.com/gradient-editor/

James about 5 years ago

Thanks Karl, but how would you apply this to $body-bg ?

Karl Ward about 5 years ago

You can't do everything with Foundation settings ... Just set it in your own sass/css file:

body {
  @include linear-gradient(#111111, #333333);
}

I would probably recommend applying the gradient on an inner div element instead of the body though, just to minimize heavy styling on the body tag.