Узнать разрешение экрана монитора посетителя можно через объект javascript — screen.width и screen.height . Посмотрим, как это поможет нам изменить фоновую картинку background под разрешение экрана.
Цельная фоновая картинка сайта, например, качественное фото, вызывает потребность растянуть или сжать background image под разрешение экрана посетителя. Так как фиксированные размеры картинки выглядят нелепо в браузерах, окна которых больше этой картинки или меньше .
Хочется , чтобы картинка была резиновая, то есть автоматически подстраивалась под разрешение экрана монитора посетителя. Такой вариант меня не устроил из-за не то чтобы потери качества, а вообще, представьте фото растянутое произвольно при разных разрешениях экрана.
Поэтому я пошла по несколько скучному и немного нудному пути, причём на этом пути полной подстройки картинки под все разрешения экранов , конечно же , не получится.
Я перечислю разрешения экранов мониторов, которые нашла.
Разрешения экранов мониторов
1280*720; 1920*1080; 1024*600; 800*480; 1366*768; 1360*768; 1280*768; 2560*1600; 1920*1200; 1680*1050; 1440*900; 1280*800; 2560*1440; 1600*900; 1600*1200; 1400*1050; 1280*960; 1024*768; 1280*1024; 1152*864 и т.д.
Впечатляет. Причём, мы на наших старенькие мониторах распахиваем окна браузеров на весь экран монитора. А на больших экранах мы этого не делаем. И представьте сколько будет весить картинка для экрана 2560*1440, если даже предположить, что пользователь раскроет окно на весь экран.
Параметры разрешения экрана , предположим, возвращают все браузеры. С небольшой заметкой — если у посетителя не отключена java.
Параметры размеров окна браузера, то есть за вычетом служебных линеек, возвращает IE, дальше я не стала проверять, так как поняла, что в моём случае, при таком море всевозможных разрешений, я могу проигнорировать эту мелочь — линейки. Пусть закрывают немного изображение.
Если в IE посетитель изменит масштаб, то IE возвращает другое разрешение экрана монитора!! Браузер Опера в этом случае вообще, я так понимаю, не взаимодействует с сервером, обходясь своим кэшем.
Понажимав ещё и F11, то есть убрав служебные линейки, я пришла к следующим выводам.
Если я хочу сделать фоновой картинкой пейзаж , то смогу это осуществить только для определённых разрешений экранов. Таких на которых,как правило, посетители распахивают окна на весь экран. Причём, под каждое разрешение экрана — своя отдельная фоновая картинка.
Для остальных разрешений экранов мониторов и для случаев отсутствия java на компьютере посетителя, у меня должна быть заготовлена особая фоновая картинка — с краями плавно переходящими в подходящий для неё цвет фона backgroud .
Всё это я сделала, и вот несложный скрипт на javascript для wordpress автоматического выбора таблицы стилей style для каждой фоновой картинки . Их 4.
Скрипт на javascript
<script language="JavaScript">
var height=0;
var width=0;
width = screen.width
height = screen.height
if (width == 1024 && height == 768 ) {
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('stylesheet_url'); ?>'>");
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>/
1024_768.css'>");
}
else {
if (width <= 1280 && height <= 1024 && width > 1024){
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('stylesheet_url'); ?>'>");
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo
('template_directory'); ?>/1280_1024.css'>");
}
else {
if (width == 1024 && height == 600){
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('stylesheet_url'); ?>'>");
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>
/1024_600.css'>");
}
else {
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>
/style_1280_800.css'>");
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>
/1280_800.css'>");
}
}}
</script>
<noscript>
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>
/style_1280_800.css'>");
document.write("<link rel='stylesheet' type='text/css'
href='<?php echo bloginfo('template_directory'); ?>
/1280_800.css'>");
</noscript>
Применяются следующие таблицы стилей css
Основная таблица стилей css для картинок с чёткими границами
<link rel=’stylesheet’ type=’text/css’
href=’<?php echo bloginfo(‘stylesheet_url’); ?>’>
Эта таблица , которая обычно присутствует в шаблоне темы и называется style.css . Эта таблица содержит все стили css для сайта
Основная таблица стилей css для картинки с размытыми границами
<link rel=’stylesheet’ type=’text/css’
href=’<?php echo bloginfo(‘template_directory’); ?>
/style_1280_800.css’>
Эта таблица присутствует в редакторе тем под названием style_1280_800.css и содержит тоже все стили css для всего сайта. Она является копией первой таблицы. Но в ней изменены некоторые цвета, потому что другая картинка требует изменить цвета, чтобы выглядеть гармонично, так как , естественно находится в другой цветовой гамме.
Содержание остальных таблиц стилей css следующее.
body {
background: url(images/1024_600.jpg) no-repeat #5c8dcf;
background-attachment:fixed;
background-position: 50% 100%;
}
Задавайте цвет фона близкий к цветовой гамме картинки.
Обязательно позиционируйте картинку по горизонтали по центру, здесь это 50%. Для картинки с чёткими границами позиционируйте прижатой к низу по вертикали — 100%.
Для картинок с размерами 1024_768 и 1280_1024 содержание файлов css такое же, отличаются только именами картинок. А картинки отличаются друг от друга только размерами, которые я сделала в Фотошопе равными этим разрешениям экранов.
Содержание таблицы стилей css для картинки с размытыми краями
body {
background: url(images/lilij_1280_800.jpg) no-repeat #f3f4ef;
background-attachment:fixed;
background-position: 50% 50%;
}
Размер картинки я просто интуитивно подобрал. Цвет фона заметьте другой. И такого рода картинку следует размещать по центру экрана. То есть и по горизонтали и по вертикали по 50%.