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

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

jorge

от jorge , в категории: HTML/CSS , год назад

16 | 0

markup css

2 ответа

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

akeem

от akeem , год назад

@jorge

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

Пример:

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).

1 | 0

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

nicolette.stoltenberg

от nicolette.stoltenberg , 7 месяцев назад

@jorge

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

<!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>

/* 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-блока с разными фоновыми изображениями, каждый из них будет иметь свою уникальную стилизацию.

0 | 0

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

2 ответа

Похожие обсуждения: