Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Фон для сайта с картинкой на весь экран
Фон для сайта с картинкой на весь экран
workman
Дата: Воскресенье, 10.08.2014, 14:08 | Сообщение # 1
Vip
Сообщений:1576
Награды: 7


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

Что же конкретно нужно сделать:

- заполнить всю страницу одним изображением без пробелов;
- изменение размеров картинки при необходимости (уменьшении окна браузера);
- сохранение пропорций изображения;
- расположение изображения в центре страницы;
- отсутствие полос прокрутки на странице;
- кросс-браузерное решение, подходящее для разных браузеров;
- реализация без всяких сторонних технологий типа flash.

Замечательное, простое и прогрессивное решение с помощью CSS

Для реализации задачи мы можем использовать свойство background-size в CSS.
Будем использовать элемент html который получше body.
Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.
Код
html {
            background: url(ссылка на картинку) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}

Решение поддерживают почти все браузеры популярные в сети:

- Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
- Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
- Chrome Whatever+
- IE 9+
- Safari 3+


Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
kredit-oformi
Дата: Воскресенье, 10.08.2014, 14:40 | Сообщение # 2
Vip
Сообщений:1953
Награды: 5


workman, тоесть фон сжелать необходимо этот код в css и все?
workman
Дата: Воскресенье, 10.08.2014, 16:10 | Сообщение # 3
Vip
Сообщений:1576
Награды: 7


kredit-oformi, Ну да. Только в body если там стоит фон его нужно убрать. Смотри как у меня. Ссылка ниже

Каждый раз, когда ты можешь помочь кому-то, просто сделай это и радуйся тому, что Бог отвечает на чьи-то молитвы через тебя...
Kosten
Дата: Воскресенье, 10.08.2014, 16:31 | Сообщение # 4
Администраторы
Сообщений:12716
Награды: 39


Фон только нужен для фиксированного каркаса сайта как ресурс у workman там и фон отлично смотриться.

Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Фон для сайта с картинкой на весь экран
Страница 1 из 11
Поиск: