/
background-image.html
36 lines (26 loc) · 1.75 KB
/
background-image.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<section id="background-image">
<h2>Background Image <a class="view-source" href="https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_background-image.scss">View source</a></h2>
<p>The background-image mixin is helpful for chaining multiple comma delimited background images and/or linear/radial-gradients into one background-image property. The Background-image mixin supports up to 10 background-images.</p>
<p>Use in combination with the <a href="#linear-gradient-function">linear-gradient function</a> and the <a href="#radial-gradient-function">radial-gradient function</a>.
{% highlight scss %}
// Multiple image assets
@include background-image(url("/images/a.png"), url("images/b.png"));
// Image asset with a linear-gradient
@include background-image(url("/images/a.png"), linear-gradient(white 0, yellow 50%, transparent 50%));
// Multiple linear-gradients - Demo
@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%),
linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)));
// NOT SUPPORTED - Multiple image assets with shorthand notation
@include background-image(url("/images/a.png") center no-repeat, url("images/b.png") left repeat);
{% endhighlight %}
<h3>Demo</h3>
<section class="demo">
</section>
<h3>Note about shorthand notation</h3>
<p>All CSS background properties support comma delimited values. For multiple background images you can specify the background properties like position, repeat, etc. for each image. For example:</p>
{% highlight scss %}
@include background-image(url("/images/a.png"), url("images/b.png"));
background-position: center top, center;
background-repeat: no-repeat, repeat-x;
{% endhighlight %}
</section>