фон не будет изменяться по вертикали

Question

Я пытаюсь создать веб-сайт и хочу, чтобы изображение (1920 × 1080) занимало всю страницу. Я использовал:

background-repeat: no-repeat;
background-size: 100%;

И это выглядит хорошо. Но когда я изменяю размер своего браузера и опускаю его вертикально, изображение не приходит с ним. Я хочу, чтобы размер моей фотографии изменялся, например, как на этом сайте: https://www.okainsbayseafood.co.nz/ (когда вы изменяете размер браузера по вертикали, изображение идет вместе с ним)

Извините за мой Engli sh и если я звучит глупо

моя веб-страница

Answer 1

Переключение background-size с 100% на cover:

background-size: cover;

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

Примечание: Если вы добавляете этот CSS к элементу, который не тег body, вам может потребоваться добавить дополнительный код для изменения размера элемент, к которому вы добавляете этот фон. Этот CSS создаст желаемый эффект, если он будет добавлен непосредственно к элементу body.

Answer 2

На самом деле у вас есть много возможностей получить такой результат:

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

Для вас, как для новичка, лучше сначала немного глубже знание CSS и того, что вы можете сделать только с одним изображением, и после этого вы можете включить оптимизацию, как на сайте выше. Так что для вас что-то подобное, вероятно, подойдет:

background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */

Изучите этот код CSS и убедитесь, что вы понимаете, что он делает и какие у вас есть другие варианты. Вы можете поиграть с некоторыми значениями и получить другие результаты.