Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Using CSS multiple backgrounds

Nuestros voluntarios aún no han traducido este artículo al Español. Únete a nosotros y ayúdanos a traducirlo

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 background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Example

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

HTML

<div class="multi_bg_example"></div>

CSS

.multi_bg_example {
  width: 100%;
  height: 400px;
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

Result

(If image does not appear in CodePen, click the TIdy button in the CSS section)

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

See also

Etiquetas y colaboradores del documento

 Colaboradores en esta página: duncanmcdonald, teoli, Sebastianz, Mushiyo, Jeremie, Mahan91, kscarfone, Sheppy, Bzbarsky, Piro
 Última actualización por: duncanmcdonald,