Чтобы фоновая картинка страницы растягивалась по вертикали на весь экран

[StOK]

Может кто сможет ответить на вопрос: как сделать, чтобы фоновая картинка сайта растягивалась вертикально? 

Я нашла стиль для горизонтального растягивания фоновой картинки:

 

body { 

    background-image: url(images/1.jpg); 

    background-repeat: no-repeat; 

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100%;

       }

 

Существует ли что-то подобное для вертикального растягивания фоновой картинки сайта?

Edited April 22, 2015 by StOK

[SelenIT]

background-size: 100%; растягивает по обоим измерениям. Возможно, по вертикали не растянут сам body, должно помочь min-height: 100vh; для него.

[Faberton]

Может кто сможет ответить на вопрос: как сделать, чтобы фоновая картинка сайта растягивалась вертикально? 

Я нашла стиль для горизонтального растягивания фоновой картинки:

 

body { 

    background-image: url(images/1.jpg); 

    background-repeat: no-repeat; 

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100%;

       }

 

Существует ли что-то подобное для вертикального растягивания фоновой картинки сайта?

Чтобы изображение растягивалось по вертикали вам нужно добавить еще одно значение, т.е. background-size:100% 100%;

Если надо чтобы изображение растягивалось только по вертикали: background-size:auto 100%;

Edited April 22, 2015 by Faberton

[StOK]

background-size: 100%; растягивает по обоим измерениям. Возможно, по вертикали не растянут сам body, должно помочь min-height: 100vh; для него.

 

Я добавила min-height: 100vh; в стили, но ничего не изменилось. Фоновая картинка остается на месте, а блоки съезжают вниз, если я уменьшаю окно браузера. Может есть другое решение? И может ли величина картинки влиять на ее способность растягиваться, если заданы такие стили? У блоков величина тоже в процентах.

 

Может кто сможет ответить на вопрос: как сделать, чтобы фоновая картинка сайта растягивалась вертикально? 

Я нашла стиль для горизонтального растягивания фоновой картинки:

 

body { 

    background-image: url(images/1.jpg); 

    background-repeat: no-repeat; 

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100%;

       }

 

Существует ли что-то подобное для вертикального растягивания фоновой картинки сайта?

Чтобы изображение растягивалось по вертикали вам нужно добавить еще одно значение, т.е. background-size:100% 100%;

Если надо чтобы изображение растягивалось только по вертикали: background-size:auto 100%;

 

 

Спасибо большое за подсказку! Сразу сработало, фон растягивается и по горизонтали и по вертикали. 

[StOK]

Подскажите, пожалуйста, почему, если задаю background-size:100% 100%; для картинки-фона, созданного в фотошопе, то он безо всяких проблем растягивается и по горизонтали и по вертикали. Но стоит мне задать те же параметры для фотографии, сжатой в том же фотошопе, как она становится узкой линией, расположенной в верхней части страницы. 

[vi3dok]

Проверьте код, скорее всего опечатка в коде.

[StOK]

Проверьте код, скорее всего опечатка в коде.

 

Вы имеете в виду, что опечатка в html-коде страницы? Или в стилях?

Я указываю в стилях 

body { 

    background-image: url(images/1.jpg); 

    background-repeat: no-repeat; 

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100% 100%;

       }

 

И все отлично срабатывает, если фон-картинка, созданная в фотошопе. Но фотография-фон вытягивается по горизонтали и сужается по вертикали из-за background-size: 100% 100%;. 

И так на нескольких страничках с разными фотографиями. 

Возник еще один вопрос. Я проверила свои странички в сервисе проверки CSS и там мне указали на ошибки:

 

Свойство -moz-background-size - неизвестное расширение поставщика

Свойство -webkit-background-size - неизвестное расширение поставщика

Свойство -o-background-size - неизвестное расширение поставщика

 

Следует эти значения убрать из таблицы стилей?

[iControl]

 

Проверьте код, скорее всего опечатка в коде.

 

Вы имеете в виду, что опечатка в html-коде страницы? Или в стилях?

Я указываю в стилях 

body { 

    background-image: url(images/1.jpg); 

    background-repeat: no-repeat; 

    -moz-background-size: 100%; 

    -webkit-background-size: 100%; 

    -o-background-size: 100%; 

    background-size: 100% 100%;

       }

 

И все отлично срабатывает, если фон-картинка, созданная в фотошопе. Но фотография-фон вытягивается по горизонтали и сужается по вертикали из-за background-size: 100% 100%;. 

И так на нескольких страничках с разными фотографиями. 

Возник еще один вопрос. Я проверила свои странички в сервисе проверки CSS и там мне указали на ошибки:

 

Свойство -moz-background-size - неизвестное расширение поставщика

Свойство -webkit-background-size - неизвестное расширение поставщика

Свойство -o-background-size - неизвестное расширение поставщика

 

Следует эти значения убрать из таблицы стилей?

 

 

Не следует

 

Префиксы - это приставки (префиксы), используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств. 

 

• -o- — префикс для браузера Опера
• -moz- — префикс для браузеров из семейства Mozilla
• -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
• -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
• -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• и закончу префиксом -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror

[Faberton]

-moz-background-size: 100%;      -webkit-background-size: 100%;      -o-background-size: 100%; 

 

К префиксам тоже надо еще значение добавить. Т.е. -moz-,-o-,-webkit-background-size:100% 100%;