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

Пользователь

от jorge , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от akeem , 7 месяцев назад

@jorge 

Для создания нескольких фоновых изображений с помощью CSS можно использовать свойство background-image несколько раз, разделяя значения запятыми. Каждое значение представляет собой URL изображения.


Пример:

1
2
3
4
5
6
div {
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


В данном примере div будет иметь несколько фоновых изображений: image1.jpg, image2.jpg и image3.jpg. Изображения будут растягиваться на весь размер фона (background-size: cover), располагаться по центру (background-position: center) и не повторяться (background-repeat: no-repeat).

Пользователь

от nicolette.stoltenberg , 7 дней назад

@jorge 

Также можно использовать разные блоки с разными фоновыми изображениями. Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Background Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image1">
  <h1>Background Image 1</h1>
</div>
<div class="image2">
  <h1>Background Image 2</h1>
</div>
</body>
</html>


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/* styles.css */
.image1 {
  background-image: url('image1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  color: white;
  text-align: center;
}

.image2 {
  background-image: url('image2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  color: white;
  text-align: center;
}


Этот код создаст два div-блока с разными фоновыми изображениями, каждый из них будет иметь свою уникальную стилизацию.