Настройка фонового изображения для элемента body в xhtml (для разных мониторов и разрешений)

#javascript #html #css #image #background

#javascript #HTML #css #изображение #фон

Вопрос:

Я так смущен фоновым изображением в элементе body.

Каков наилучший способ настройки фонового изображения для элемента body в xhtml (для разных мониторов и разрешений)?

Я имею в виду, когда вы создаете фон (например, 1024 * 768) и помещаете его в элемент body с правилом background, поэтому у нас возникают некоторые проблемы при другом разрешении или на другом мониторе (поэтому он шире, чем задумано).

Как я могу решить эту проблему, не изменяя свое изображение с помощью Photoshop?

Должны ли мы что-то сделать с помощью JavaScript или jQuery?

Ответ №1:

Я думаю, вы хотите изменить размер своего фона, чтобы он растягивался и всегда отображался в полноэкранном режиме. Если это так, вы можете использовать supersize: http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin /

Надеюсь, это поможет вам

1. спасибо за ответ / я проверил вашу ссылку, но, похоже, ее демонстрация не работает / но ваш ответ подсказал мне поиск похожего плагина jquery, и поэтому я нашел плагин bgStertcher с помощью jquery -> ajaxblender.com /… (да благословит тебя бог, парень)

Ответ №2:

Наиболее распространенной практикой является создание изображения большего размера, учитывая, что наиболее подходящей областью является центральная область шириной 1024 дюйма, а остальное — просто для заполнения страницы, когда пользователь использует большие разрешения. Как писал Марсель Корпел, используйте свойство background-position в css, чтобы применить выравнивание по центру.

Ответ №3:

Похоже, вам нужно не только использовать css для размещения фонового изображения, но и затем изменить размер содержащегося div в соответствии с вашими ожиданиями.

 body {
    background: url(path/to/image) no-repeat center center;
    width: 1024px;
    height: 768px;
}

Ответ №4:

Вплоть до версии 3.1 в css вы можете использовать функцию calc. С помощью этого вы могли бы вычислить «правильное» имя файла фонового изображения, соответствующее размеру и разрешению отдельного монитора.