Как использовать несколько фоновых изображений с помощью CSS

CSS3 позволяет добавлять несколько фоновых изображений для одного элемента, используя список значений через запятые, чтобы указать необходимое количество фонов.

Список значений background-position и/или background-repeat, которые разделены через запятые, задают положение и повторение соответственно для нескольких фоновых изображений:

div {
background-image:url(image1), url(image2), url(image3);
background-position:center right, right bottom, center top;
background-repeat:no-repeat, repeat-y, repeat-x;
}

В данном примере image1 имеет положение center-right и не повторяется, image2 имеет положение right bottom и повторяется по вертикали, а image3 имеет положение center top и повторяется по горизонтали.

Это один из способов установления нескольких изображений. Можно установить изображение с помощью свойства background-image, потом указать положение изображения с помощью свойства background-position и указать повторение изображений с помощью свойства background-repeat.

Второй способ добавления нескольких изображений это использование свойства background:

div {
background:  url("image1")  no-repeat center bottom, url("image2") no-repeat center top , blue;
}

При применении свойства background-color для нескольких фоновых изображений цвет применяется в конце перед всеми фоновыми изображениями. Как видите в вышеприведенном пример, синий цвет указывается в конце.

Давайте узнаем, как можно пошагово создать несколько фоновых изображений с помощью CSS!

  1. Выберите три изображения. Они должны иметь небольшой размер, чтобы вы смогли увидеть, как работают свойства background-position и background-repeat.
  2. Создайте простой HTML документ с элементом <div>.
  3. Примените стиль к элементу <div> и не забудьте задать для него ширину и высоту.

А сейчас увидим результат!

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .example {
      width: 100%;
      height: 500px;
      background:  url("http://www.cliparthut.com/clip-arts/26/vista-aero-pack2-transparent-png-icon-download-free-vector-clipart-M3rZlU.png")  no-repeat 10% 110%, url("https://cdn2.iconfinder.com/data/icons/halloween-icon-set/512/moon_bat__.png")  no-repeat 120% 700% , #002054;
      }
    </style>
  </head>
  <body>
    <div class="example"></div>
  </body>
</html>

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #example{
      margin:0;
      padding:0;
      position: absolute;
      top: 0;
      left:0;
      bottom: 0;
      width: 100%;  
      height: 70%;
      background-image: url("https://userscontent2.emaze.com/images/d56242ef-c20d-4350-9877-321cb4523328/7c5cdc4d9f6bf00f3fb279f51d7d23fc.png"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/239518/birds2.svg"), url("http://www.transparentpng.com/thumb/clouds/W5czgG-blue-clouds-png-icon.png"), linear-gradient(to bottom,  rgba(255,255,255,0), 40%,rgba(255,255,255,1) 60%);
      background-size: 20%, 20%, 100%, 100%, 50px;
      background-repeat: no-repeat, no-repeat, no-repeat, repeat-x,repeat;
      background-position: 5% 40%, 95% 60%, center bottom;
      }
      }
    </style>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>