Резиновый фон с авто масштабированием картинки
Сделать фон сайта резиновым и масштабируемым, подходящим под любые размеры страницы сайта не сложно. Фон будет автоматически подстраиваться под изменения размеров страницы сжимая и расширяя картинку по высоте и ширине. Это самый надежный способ, который поддерживается всеми современными браузерами включая встроенный в устройства Андроид. Дело в том, что свойство фона-Размер понимают не все браузеры, а добавляемые к нему префиксы не создают желаемого результата. Для установки скрипта и его правильной работы Вам потребуется подключенная библиотека jQuery, в так же нужно отменить (при наличии) сценарий отображения фона в CSS в на требуемых страницах и разместить перед закрывающим тегом тела скрипт для подключения эффекта масштабирования. По умолчанию Z-индекс масштабируемого скрипта выставлен в максимальное значение, его влияние будет оказано только на резиновые свойства фона страниц сайта. Для установки на сайте системы uCoz у нужно аналогичным способом убрать значения для свойства фона для основного селектора к которому прикреплен фон страниц, например строку в "Таблице стилей CSS", в:
Код
body {
background: #000000 адрес URL('/images/bg.jpg') слева вверху повторите-х фиксированное;
}
нужно изменить на:
Код
body {
background:прозрачный;
}
Проще говоря Вам нужно сделать фон прозрачным, а уже потом, например в "Нижней части сайта" разместить предлагаемый скрипт для установки.
Скрипт для установки масштабируемого фона
Красным цветом выделен адрес к картинке, который Вам потребуется изменить на свой.
Код
<script src="//delaisait.ucoz.ru/script/effect/2014/js/backgroundsize.js"></script>
<script>
var images = "//fantastic-girl.ucoz.ru/_ph/1/801058435.jpg";
var index = 0;
$.backgroundsize(images[index]);
</script>
ВТОРОЙ ВАРИАНТ:
Код CSS для фона сайта
ширина - 100%
высота - auto
Код
body { background: url(nature.jpg) center center fixed no-repeat;
-moz-background-size: 100% auto; /* Firefox до 4.0 */
-webkit-background-size: 100% auto; /* Safari и Chrome */
-o-background-size: 100% auto; [size=8]/* Opera до версии 10.53 */
-khtml-background-size: 100% auto;
background-size: 100% auto; /* CSS3 */}
Код CSS для фона шапки
ширина - 100%
Код
.image {width: 100%;min-width:400px;background-image: url('image.jpg');}
