mozilla

Revision 373463 of Using CSS multiple backgrounds

  • Revision slug: CSS/Tutorials/Using_CSS_multiple_backgrounds
  • Revision title: Using CSS multiple backgrounds
  • Revision id: 373463
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment CSS/Using_CSS_multiple_backgrounds CSS/Tutorials/Using_CSS_multiple_backgrounds

Revision Content

With CSS3, 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. Only the last background can include a background color.

Specifying multiple backgrounds is easy:

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

You can do this with both the shorthand {{ cssxref("background") }} property and the individual properties thereof except for {{ cssxref("background-color") }}. That is, the following background properties can be specified as a list, one per background: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

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),
        linear-gradient(to right, 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;
}
Result
css_multibg.png

As you can see here, the Firefox logo (listed first) is on top, followed by the gradient, which is layered atop the flowered background. Each subsequent sub-property ({{ cssxref("background-repeat") }} and {{ cssxref("background-position") }}) applies to the corresponding backgrounds. So the first listed value for {{ cssxref("background-repeat") }} applies to the first (frontmost) background, and so forth.

See also

Revision Source

<p>With <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>, you can apply <strong>multiple backgrounds</strong> to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.</p>
<p>Specifying multiple backgrounds is easy:</p>
<pre class="brush: css">
.myclass {
&nbsp; background: background1, background 2, ..., backgroundN;
}
</pre>
<p>You can do this with both the shorthand {{ cssxref("background") }} property and the individual properties thereof except for {{ cssxref("background-color") }}. That is, the following background properties can be specified as a list, one per background: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.</p>
<h2 id="Example">Example</h2>
<p>In this example, three backgrounds are stacked: the Firefox logo, a <a href="/en/CSS/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),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">
  <tbody>
    <tr>
      <td class="header">Result</td>
    </tr>
    <tr>
      <td style="padding:0;"><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png" style="display:block;" /></td>
    </tr>
  </tbody>
</table>
<p>As you can see here, the Firefox logo (listed first)&nbsp;is on top, followed by the gradient, which is layered atop the flowered background. Each subsequent sub-property ({{ cssxref("background-repeat") }} and {{ cssxref("background-position") }}) applies to the corresponding backgrounds. So the first listed value for {{ cssxref("background-repeat") }} applies to the first (frontmost) background, and so forth.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Background() }}</li>
  <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a></li>
</ul>
Revert to this revision