mozilla

Revision 45964 of Using CSS multiple backgrounds

  • Revision slug: CSS/Multiple_backgrounds
  • Revision title: Multiple backgrounds
  • Revision id: 45964
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ gecko_minversion_header("1.9.2") }}

Starting with {{ gecko("1.9.2") }}, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back.

Specifying multiple backgrounds is easy:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

You can do this with both the catchall {{ cssxref("background") }} property and the individual subproperties thereof: {{ CSS_Reference:Background() }}.

Example

In this example, three backgrounds are stacked: the Firefox logo, a linear gradient, and an image with flowers:

.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
Screen Shot Live Demonstration
css_multibg.png
 

Revision Source

<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>Starting with {{ gecko("1.9.2") }}, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back.</p>
<p>Specifying multiple backgrounds is easy:</p>
<pre class="brush: css">.myclass {
  background: background1, background 2, ..., backgroundN;
}
</pre>
<p>You can do this with both the catchall {{ cssxref("background") }} property and the individual subproperties thereof: {{ CSS_Reference:Background() }}.</p>
<h2>Example</h2>
<p>In this example, three backgrounds are stacked: the Firefox logo, a <a href="/en/CSS/-moz-linear-gradient" title="en/CSS/-moz-linear-gradient">linear gradient</a>, and an image with flowers:</p>
<pre class="brush: css">.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        -moz-linear-gradient(left, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
</pre>
<table class="standard-table" style="table-layout: fixed; width: 450px;"> <tbody> <tr> <td class="header">Screen Shot</td> <td class="header">Live Demonstration</td> </tr> <tr> <td><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png"></td> <td> <div style='width: 202px; height: 102px; border: 1px solid rgb(51, 51, 51); background: url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png") no-repeat scroll right bottom, -moz-linear-gradient(left center , rgba(255, 255, 255, 0), rgb(255, 255, 255)) no-repeat scroll left center, url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg") repeat scroll right center transparent;'> </div> </td> </tr> </tbody>
</table>
Revert to this revision