Разные background-image в зависимости от разрешения экрана посетителя.

[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)

Если есть вопросы и уточнения - задавайте.

Edited July 26, 2011 by mannvillage

[Vlad]

У вас слабое представление о PHP. То, что вам требуется, лежит за пределами этого языка. В идеале CSS3 вам подходит с его языком медиа-запросов.

http://htmlbook.ru/css/value/media

Но для универсальности JavaScript.

И пожалуйста, не надо плодить одну и ту же тему в разных разделах.

[mannvillage]

Влад. Спасибо. Действительно, представление о PHP у меня не очень сильное, я не очень хорошо им владею. Не буду больше плодить одни темы в разных форумах. Приношу извинения.

Рещение на CSS3 не будет корректно работать во всех браузерах. К примеру, в IE некоторые свойства могут не функционировать. Значит нужно использовать Javascript... Понятно. А как это реализовать на этом языке? В можете переместить эту тему в Javascript форум?

Edited July 27, 2011 by mannvillage

[Vlad]

Возможно в этих темах есть подсказки.

http://forum.htmlbook.ru/index.php?showtopic=7520

http://forum.htmlbook.ru/index.php?showtopic=13181

[mannvillage]

Возможно в этих темах есть подсказки.

http://forum.htmlbook.ru/index.php?showtopic=7520

http://forum.htmlbook.ru/index.php?showtopic=13181

Да, темы интресные! Спасибо, Влад! Только как при помощи JavaScript записывать свойства CSS для контейнеров? Я не хочу подключать новые таблицы стилей и в них описывать контейнеры, а включить CSS Контейнеров, код которых нужно изменить прямо в Head сайта, таким образом я буду иметь наивысший приоритет на изменения свойств. А если прописать Css для контейнеров в .css файле, а потом подгрузить эту разметку на страницу, при соблюдении определенных условий, нужные мне свойства могут не перекрыться, так как там Столько всего подгружаеться... Нужно еще заняться и оптимизацией страницы..

Как при помощи JavaScr. записать свойства для контейнеров прямо в Head страницы? Я думаю, это верное решение. Если вы посетите http://test000.hourb.com/ и проинспектируете код страницы - вы поймете чего я так пишу...

[Vlad]

Нет, верное решение заготовить несколько CSS-файлов под разное разрешение и подключать их по условию. Различаться эти файлы могут всего одной строкой, задавая ширину нужного элемента. Т.е. у вас будет один общий CSS-файл для всех разрешений и три-пять для определённых разрешений.

[mannvillage]

И еще Влад, скажите... где я могу обсудить вопрос подключения к сайту возможности авторизации через Facebook, Вконтакте и MAIL.ru? Я уже ставил эти дополнения от этих разработчиков на сайт, но полноценной авторизации пользователь не получает. Т.е происходит просто процесс передачи контактных данных на сервер плагина, а потом подтверждение. И все..

[mannvillage]

Нет, верное решение заготовить несколько CSS-файлов под разное разрешение и подключать их по условию. Различаться эти файлы могут всего одной строкой, задавая ширину нужного элемента. Т.е. у вас будет один общий CSS-файл для всех разрешений и три-пять для определённых разрешений.

Ширину и фоновое изображение для этого разрешения. А как это все сделать еще и для трех стилей оформления. Для стилей - нужно менять только рамку фонового изображения (тоже подбирать ее в зависимости от разрешения экрана, но при этом еще и если человек захочет поменять стиль страницы на Синий или Красный, менять и файл с рамкой, а фон оставлять неизменным - для красного загружать файл с красной рамкой для етого разрешения и для синего соотвтетств.

А как вообще, считаете, не плохой сайт онлайн фильмов будет если все довести до ума, так сказать..?

Edited July 27, 2011 by mannvillage