... А вообще, если честно, мне просто интересно, как и о чем вы думаете, когда пытаетесь что-то сделать. В данном случае - впихнуть фоновую картинку.?. Я, например, подхожу к вопросу очень просто, для меня:
1. Точно определяюсь что и для чего мне нужно.
2. Если знаю как - пишу, проверяю, выкладываю.
3. Если не знаю, - ищу инфу по нужному вопросу, и пополняю знания инфой ... и практикой, естественно.
Итак. Пункт первый. Определяемся.
Из скрипта видно, что: в зависимости от разрешения экрана, вам нужно поставить в фон нужную картинку. А из того, что ваш сайт на юкоз хостинге, а следовательно - подключен стандартный «u.js» - писать буду на JQuery. (для меня - проще)
Из кода, вижу, что у вас есть див с ID = clientWidth ... Очень хорошо. Он оборачивает собой все содержимое страницы. Еще лучше.
Создаю документ. Стандартный, из моих шаблонов для примеров. Код его прост:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<meta name="author" content="Likbezz Flesh" />
<meta name="description" content="Пример смены фоновой картинки у элемента, в зависимости от разрешения монитора пользователя. v1. Источник «likbezz.ucoz.ru»" />
<meta name="Publisher-URL" content="Уголок аццкого кодера - http://likbezz.ucoz.ru" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="robots" content="index,nofollow" />
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady
// End DocumentReady
});
</script>
</head>
<body>
</body>
</html>
... Далее - всё ещё проще.
Прописываю стандартные скрипты от юкоза:
Code
<style type="text/css">.UhideBlock {display:none}</style>
<script type="text/javascript" src="/_theme/_st/~s29/u.js"></script>
И, естественно, всю твою CSS, сохранённую локально:
Code
<link rel="stylesheet" type="text/css" href="/_example/sites/denis-osadchiy/my.css"/>
В стили пишу свои стили - мне, на данный момент, не интересно, прописал ты их у себя или нет.
А именно:
Фон, для #clientWidth по умолчанию - если, по любым причинам, скрипт у клиента не сработает;
Фон для <body> - так как картинка - тёмная;
Высоту <body> - на всякий ...
Убираю бордер у таблиц, внутри #clientWidth - мне они не нужны.
Что получилось:
Quote (CSS)
<style type="text/css">
#clientWidth{background: url("/_example/sites/denis-osadchiy/1024x768_3.jpg") top center no-repeat fixed;width:100%;height:auto;margin:0px auto;text-align:center;}
html,body{height:100%;}
body{background:#021126 url('/_example/sites/denis-osadchiy/_body_bg.jpg') top left;}
#clientWidth table{border:none! important;background-color:transparent! important;}
</style>
Далее, - открываю страницу с твоего сайта - любую, где есть контент, - лично мне - по барабану, какую именно.
Копирую исходное содержимое от <body> до </body>, вставляю в документ.
Смотрю, что не так.
Ага, появились «баги» - смотрю, в чем дело. Оказывается у тебя прописана какая-то картинка для боди. Перехожу по адресу ... и вижу - картинки-то не существует.....
OK - не беда - Скрываем стили. Рисуем новую.
Quote (CSS)
td,
body
{
/*background-image:url('/Fon/1/1.jpg');/* Отсутствующая картинка */
background-repeat:no-repeat;
background-attachment:fixed*/
}
Все вроде нормально. Далее. Таблица с контентом, почему-то не по центру - смотрю исходник, и вижу:
Quote (HTML)
<table style="background: transparent none no-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
- мне это не нравится - убираю лишнее. Все, теперь можно и скрипт писать.
Определяем переменные, с которыми буду работать:
Quote (Java Script)
var w = $(window).width(); // для краткости записи
var mElm = $('#clientWidth'); // Элемент
Для чего тебе понадобилась высота (document.documentElement.clientHeight) - я, честно говоря, так и не понял, - в условиях она не фигурирует, а задавать для обёрточного дива, коим является #clientWidth - фиксированную высоту ... лишнее, если не сказать «глупо» - так как он должен обхватывать все видимые элементы страницы - а это и есть высота «клиента». Следовательно лишнее - убираю.
Также, я не понял, для чего задавать и ширину дива, в фиксированных единицах. У таблицы с контентом уже есть фиксированная ширина, а див, как я понял, мы используем только для картинки.
К тому ж, если уж, всё таки, задавить ширину - нужно учитывать и полосу прокрутки.
Все.
Скрипт готов.
Переписываем условия из ума на «бумагу», а именно в код страницы. (!!!!) и помним, мы работаем с элементом #clientWidth.
Вот и сам код:
Quote (Java Script)
<script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady
// Start clientwidth
var w = $(window).width(); // для краткости записи
var mElm = $('#clientWidth'); // Элемент
if (w < 1200){
mElm.css({background:'url(/_example/sites/denis-osadchiy/1024x768_3.jpg) top right no-repeat fixed'});
};
if(w >= 1200 && w < 1480){
mElm.css({background:'url(/_example/sites/denis-osadchiy/1440x900_3.jpg) top right no-repeat fixed'});
};
if(w >=1480){
mElm.css({background:'url(/_example/sites/denis-osadchiy/1680x1050_3.jpg) top right no-repeat fixed'});
};
// End DocumentReady
});
</script>
☑ Ссылка на готовое решение.
P.S. Осталось сделать так, чтобы картинка менялась при изменении окна просмотра, то есть, браузера, вручную. Кому интересно - я сделал. Надо же хоть как-то заставить шевелить серым веществом - а то всё «готовые решения ...» ... ѿ ヅ
P.S. Картинки я перерисовал и обрубил. Первое, для фона картинка весом 315kb - это дохрена. Второе, ей не обязательно быть такой широкой. Там должен быть только спортсмен. Остальное - фон.
Flesh
