Фоновое изображение тела CSS фиксировано для полноэкранного режима даже при масштабировании/выводе

Я пытаюсь добиться чего-то подобного с помощью CSS:

Я хочу, чтобы фоновое изображение тела фиксировалось на полноэкранном режиме, это делается следующим кодом:

body
{
    background: url(../img/beach.jpg) no-repeat fixed 100% 100%;
}

Теперь я могу проверить, что окно действительно заполнено этим изображением, по крайней мере это работает на моем Firefox 3.6

Однако, когда я попытался увеличить/уменьшить масштаб (ctrl + -/+), он испортился, изображение просто растягивается/сжимается при масштабировании страницы.

Есть ли лучший способ сделать это исключительно с помощью CSS? Я не нашел хорошего свойства для фонового изображения.

Или я должен начать думать о jQuery, чтобы манипулировать шириной и высотой на лету? Они оба установлены на 100%, поэтому я считаю, что должен работать "как всегда": (

Спасибо за любое предложение заранее!

Ответы

Ответ 1

Я использовал эти методы, и они оба работают хорошо. Если вы читаете "за" / "против" каждого из них, вы можете решить, что подходит для вашего сайта.

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

Ответ 2

существует еще один метод

использование

background-size:cover

То есть полный набор css

body { 
    background: url('images/body-bg.jpg') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Последние браузеры поддерживают свойство по умолчанию.

Ответ 3

Добавьте это в свой файл css:

.custom_class
 {
    background-image: url(../img/beach.jpg);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 }

а затем в вашем файле .html(или .php) вызовите этот класс следующим образом:

<div class="custom_class">
   ...
</div>

Ответ 4

Вот простой код для полноэкранного фонового изображения при масштабировании вы просто применяете width:100% в стиле /css, который он

position:absolute; width:100%;

Ответ 5

Вы можете сделать довольно много с простым css... свойство css background-size может быть установлено как целое, так и просто cover, как указал Ранджит.

Параметр background-size: cover масштабирует изображение, чтобы покрыть весь экран, но может означать, что некоторые изображения не отображаются на экране, если соотношение сторон экрана и изображения отличается.

Хорошей альтернативой является background-size: contain, которая изменяет размер фонового изображения в соответствии с меньшей шириной и высотой, гарантируя, что все изображение будет видимым, но может привести к почтовому ящику, если соотношение сторон отличается.

Например:

body {
      background: url(/images/bkgd.png) no-repeat rgb(30,30,30) fixed center center;
      background-size: contain;
     }

Другими вариантами, которые я считаю менее полезными, являются: background-size: length <widthpx> <heightpx>, который устанавливает абсолютный размер фонового изображения. background-size: percentage <width> <height> фоновое изображение - процент от размера окна. (см. страница w3schools.com)