Масштабируемый Фоновый HTML CSS Javascript

StackOverflow https://stackoverflow.com/questions/2200391

Вопрос

Кто-нибудь знает способ масштабирования фонового изображения в соответствии с размерами окна браузера, в котором оно находится?Я знаю, что CSS3 допускает ширину фона, но мне нужно что-то более совместимое.

Большое спасибо,

Эллиот

Это было полезно?

Решение

Вы не можете сделать это с помощью background-image, так как он не поддерживает определение размера.Вы должны подделать это, поставив img тег, который растягивается на 100% в обоих направлениях, и расположите его позади вашего контента, используя абсолютное позиционирование и z-index.Что-то вроде этого должно сработать:

<body>
    <img class="bgimage" src="bgimage.jpg" />
    <div id="content">
        Your content here...
    </div>

И в CSS:

html, body {
    min-height: 100%;
}

.bgimage {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Я это не тестировал, но это должно дать вам хотя бы немного для начала.

Другие советы

Вот в чем хитрость (из http://css-tricks.com/how-to-resizeable-background-image/)

Определите свой образ следующим образом:

<body id="page-body">
    <img class="source-image" src="images/image.jpg" alt="" />
</body>

и ваш CSS выглядит следующим образом:

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
body {
    overflow: hidden;
}

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

  • Некоторым браузерам было трудно быстро отрисовывать его:в первый раз, во время перепрошивки и изменения размера окна.

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

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

Как только мы удалили растянутое изображение, наше приложение снова заработало быстро, и мы перестали откладывать, играя с картинкой ;)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top