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

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

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

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

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

Сделаем что-нибудь с JavaScript или jQuery?


person SilverLight    schedule 06.04.2011    source источник
comment
Чего вы точно хотите? Изображение, которое точно соответствует ширине окна браузера? Вы читали о свойстве background-position?   -  person Marcel Korpel    schedule 06.04.2011


Ответы (4)


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

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

person Luuk    schedule 06.04.2011
comment
спасибо за ответ / я проверил вашу ссылку, но кажется, что демо не работает / но ваш ответ дал мне возможность найти похожий плагин jquery, и поэтому я нашел плагин bgStertcher с jquery -› ajaxblender.com/ (да благословит вас бог, чувак) - person SilverLight; 15.05.2011

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

person Leandro    schedule 06.04.2011

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

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

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

person strauberry    schedule 06.04.2011