mannvillage

Добрый день, дорогие друзья! Для начала - вот проект, над которым сейчас работаю. http://test000.hourb.com/ - это тестовый аккаунт. Будущий сайт для онлайн кинозала. Ребята, подскажите... Как на PHP (javascript) реализовать автоматическую смену следующих CSS свойств: В ЗАВИСИМОСТИ ОТ РАЗНОГО РАЗРЕШЕНИЯ ЭКРАНА ПОЛЬЗОВАТЕЛЯ. И сделать предварительную загрузку background в зависимости от разрешения. Причем background трех разных стилей для КРАСНОГО СИНЕГО И БРОНЗОВОГО. background-color background-image background-origin: background-position: background-repeat: background-size: для блоков: <div id="bg_wall"> <div id="bg_border">Основной Контонет</div> </div> Для блока <div id="bg_border"> необходимо продублировать для стилей оформления СИНИЙ/КРАСНЫЙ/БРОНЗОВЫЙ Css стилей - СИНИЙ:Style1.css КРАСНЫЙ:Style2.css БРОНЗОВЫЙ:Style3.css Т.е граница фона должна быть СИНЕЙ - при стилей сайта СИНИЙ, Красной - при стилей сайта Красный и Бронзовой - при стилей сайта Бронзовый. Для текущих Css свойств блоков <div id="bg_wall"> и <div id="bg_border"> можете поинспектировать http://test000.hourb.com/ код в ваших любимых браузерах ( я использую Хром ) Стиль по умолчанию - Бронзовый. Т.е мне необходимо определить разрешение экрана пользователя, браузер и в зависимости от этих данных загрузить на странице в блок <div id="bg_wall">, <div id="bg_border"> фоновое изображение нужного разрешения (причем другое изображение, а не растягивать текущее, динамически изменяя его разрешение). Изменив при этом соответствующие CSS свойства. <div id="bg_wall"> - это контейнер для фона, а <div id="bg_border"> - это контейнер для рамки фона. Все это - и рамка и фон должны меняться при разных разрешениях. Вот так (как я это представляю... - 1920*1080 загружаем image1920*1080.jpg в блок <div id="bg_wall"> и изменяем (добавляем) свойства background-color background-image background-origin: background-position: background-repeat: background-size загружаем border1920*1080.png в блок <div id="bg_border"> и изменяем (добавляем) свойства background-color background-image background-origin: background-position: background-repeat: background-size - 1024*768 загружаем image1024*768.jpg в блок <div id="bg_wall"> и изменяем (добавляем) свойства background-color background-image background-origin: background-position: background-repeat: background-size загружаем border1024*768.png в блок <div id="bg_border"> и изменяем (добавляем) свойства background-color background-image background-origin: background-position: background-repeat: background-size Ну и так далее для разных разрешений. Вот текущие CSS свойства блоков div#bg_wall { background: url('http://test000.hourb.com/templates/gk_memovie/images/backgrounds/bg4.jpg') no-repeat fixed center 0; } #bg_wall { display: block; padding: 0; margin: 0; } #bg_border (стиль БРОНЗОВЫЙ) { background: transparent url('../images/style3/bg_border_3.png') no-repeat center 0 fixed; } #bg_border (стиль СИНИЙ) { background: transparent url('../images/style1/bg_border_1.png') no-repeat center 0 fixed; } #bg_border (стиль КРАСНЫЙ) { background: transparent url('../images/style2/bg_border_2.png')no-repeat center 0 fixed; } #bg_border { display: block; padding: 0 0 10px 0; margin: 0 auto; } Может быть у кого-то из вас, более подготовленных, есть уже готовое решение на PHP или Javascript (PHP - предпочтительней, так как дизайн почти полностью на PHP). Я написал так много лищь потому, что хочу быть уверенным, что меня правильно поняли и предоставить вам кам можно больше информации. Мой монитор в разрешеии FULL HD (1920*1080) Если есть вопросы и уточнения - задавайте.