• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Фон для сайта с картинкой на весь экран
Фон для сайта с картинкой на весь экран
workman
Воскресенье, 10 Августа 2014 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
В данном уроке мы расскажем как установить выбранный фон на свой сайт

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

- заполнить всю страницу одним изображением без пробелов;
- изменение размеров картинки при необходимости (уменьшении окна браузера);
- сохранение пропорций изображения;
- расположение изображения в центре страницы;
- отсутствие полос прокрутки на странице;
- кросс-браузерное решение, подходящее для разных браузеров;
- реализация без всяких сторонних технологий типа 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+
Страна: (RU)
kredit-oformi
Воскресенье, 10 Августа 2014 | Сообщение 2
Оффлайн
Vip
Сообщений:1975
Награды: 5
workman, тоесть фон сжелать необходимо этот код в css и все?
Страна: (RU)
workman
Воскресенье, 10 Августа 2014 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
kredit-oformi, Ну да. Только в body если там стоит фон его нужно убрать. Смотри как у меня. Ссылка ниже
Страна: (RU)
Kosten
Воскресенье, 10 Августа 2014 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Фон только нужен для фиксированного каркаса сайта как ресурс у workman там и фон отлично смотриться.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Фон для сайта с картинкой на весь экран
  • Страница 1 из 1
  • 1
Поиск: