Масштабируемый резиновый фон - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Масштабируемый резиновый фон

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Масштабируемый резиновый фон

Резиновый фон с авто масштабированием картинки




Сделать фон сайта масштабируемым и резиновым, подходящим под любые размеры страницы сайта не сложно. Фон будет автоматически подстраиваться под изменения размеров страницы сжимая и расширяя картинку по высоте и ширине. Это самый надёжный способ, который поддерживается всеми современными браузерами включая встроенный в устройства Андроид. Дело в том, что свойство background-size понимают не все браузеры, а добавляемые к нему префиксы не создают желаемого результата. Для установки скрипта и его правильной работы Вам потребуется подключенная библиотека jQuery, так же нужно отменить (при наличии) сценарий отображения фона в CSS на требуемых страницах и разместить перед закрывающим тегом body скрипт для подключения эффекта масштабирования. По умолчанию z-index масштабируемого скрипта выставлен в максимальное значение, его влияние будет оказано только на резиновые свойства фона страниц сайта. Для установки на сайте системы uCoz нужно аналогичным способом убрать значения для свойства background для основного селектора к которому прикреплён фон страниц, например строку в "Таблице стилей CSS":

body {
background: #000000 url('/images/bg.jpg') top left repeat-x fixed;
}

нужно изменить на:

body {
background:transparent;
}

Проще говоря Вам нужно сделать фон прозрачным, а уже потом, например в "Нижней части сайта" разместить предлагаемый скрипт для установки. Для получения дополнительных разъяснений используйте форму комментариев материала, постарайтесь быть объективнее в излагаемом.





Скрипт для установки масштабируемого фона

Красным цветом выделен адрес к картинке, который Вам потребуется изменить на свой.



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



Скрипт для проверки масштабируемого фона в редакторе

Внимание!!! Данный пример содержит скрипт библиотеки jQuery выделенный в примере красным цветом и смотрите не устанавливайте этот пример на свой сайт если он на юКозе, этот пример нужен только для проверки работоспособности эффекта автомасштабирования на месте, в "Редакторе HTML". Чтобы воспользоваться редактором для проверки скрипта, нажмите на картинку в нижнем левом углу страницы этого материала, в открывшейся панели нажмите на "Редактор HTML". Поместите пример кода для проверки в редактор, нажмите для отображения результата. Попробуйте изменить размер окна страницы, чтобы убедится в работоспособности предлагаемого скрипта.



<script type="text/javascript" src="//s36.ucoz.net/src/jquery-1.7.2.js"></script>
<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>


 






Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1965 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: масштабируемый, Фон, Background, Rubber, scalable, резиновый

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]