Как использовать несколько фоновых изображений с помощью CSS
В этой статье мы поговорим о том, как добавить несколько фоновых изображений для элемента.
Различные фоновые изображения разделяются запятыми, изображение крайнего левого по значению находится поверх остальных.
Исходный код:
Внутри html-страницы у нас есть просто ‹div› высотой 300 пикселей и шириной 100%. Теперь мы собираемся добавить несколько изображений в качестве фоновых изображений.
div{
height: 300px;
width: 100%;
background-image: url(ckmobile.png),url(table.jpg)
}
Фон-повтор
Если мы установим background-repeat как no-repeat. Поскольку мы хотим, чтобы и логотип, и фоновое изображение не повторялись, поэтому нам просто нужно установить запрет повторения один раз.
div{
height: 300px;
width: 100%;
background-image: url(ckmobile.png),url(table.jpg);
background-repeat:no-repeat;
}
Фоновое положение
Теперь мы хотим центрировать как логотип, так и фоновое изображение. Итак, мы устанавливаем background-position:center.
div{
height: 300px;
width: 100%;
background-image: url(ckmobile.png),url(table.jpg);
background-repeat:no-repeat;
background-position: center;
}
Мы также можем установить логотип в правом верхнем углу, сказав
div{
height: 300px;
width: 100%;
background-image: url(ckmobile.png),url(table.jpg);
background-repeat:no-repeat;
background-position: top right, center;
background-size: 200px,cover;
}
Но мы решили разместить логотип в центре.
Размер фона
Будет намного приятнее, если логотип будет меньше и мы не сможем увидеть всю картину фонового изображения. Мы можем установить размер логотипа шириной 200 пикселей и размер фона фонового изображения, которое будет закрыто.
div{
height: 300px;
width: 100%;
background-image: url(ckmobile.png),url(table.jpg);
background-repeat:no-repeat;
background-position: center;
background-size: 200px,cover;
}
Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram.
