Как повторить изображение с обеих сторон по вертикали?
Мне удалось только опустить фоновое изображение вертикально вниз в левой части веб-сайта. Но я не понял, как заставить фоновое изображение делать то же самое справа от веб-страницы.
<style>
body {
background-image: url('background.png');
background-size: 950px;
background-repeat: repeat-y;
}
</style>
Я попробовал продублировать изображение и повернуть его вправо, но это не сработало. В итоге это просто испортило фоновое изображение слева и в центре.
Ответы 2
Если вы хотите, чтобы ваше изображение повторялось только по вертикали, но с обеих сторон страницы. Вы можете дать 2 одинаковых фона, но расположить их на разных сторонах:
background:
url('background.png') left / 950px repeat-y,
url('background.png') right / 950px repeat-y;
Обратите внимание, это фон, а не background-image. Это сокращение для:
background-image: url('background.png'), url('background.png');
background-position-x: left, right;
background-size: 950px, 950px;
background-repeat: repeat-y, repeat-y;
Вот живой пример:
body {
background:
url('https://picsum.photos/120/120') left / 120px repeat-y,
url('https://picsum.photos/120/120') right / 120px repeat-y;
}@Symtox Да и нет. фон — это набор атрибутов, которые вы можете назначить не только background-image, но и другие атрибуты (background-position-x, background-size и т. д.), использование background-image здесь нарушит код. Легче связать каждый атрибут, связанный с одним background-image, используя это сокращение, если у вас есть несколько фонов, предоставленных IMO.
Вы можете использовать несколько фоновых изображений в CSS. Это предполагает указание одного и того же изображения дважды: один раз для левой и один раз для правой стороны, и соответствующее их расположение.
Один экземпляр фонового изображения находится слева, а другой — в правой части веб-страницы, оба повторяются вертикально. Вы можете настроить значения background-size и background-position по своему усмотрению.
body {
background-image: url('https://picsum.photos/200/300'), url('https://picsum.photos/200/300');
background-size: 100px auto, 100px auto;
background-position: left top, right top;
background-repeat: repeat-y, repeat-y;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Background Image on Both Sides</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
Background — это сокращенное свойство для фонового изображения. Если вы посмотрите на формальный синтаксис в предоставленной вами ссылке, фон: url('picsum.photos/120/120' ) совпадает с фоновым изображением: url(' picsum.photos/120/120')