Как сделать фон картинкой в css

Как с помощью CSS сделать фон на всю страницу?

В этом уроке мы поговорим о том, как с помощью различных CSS приемов сделать фон сайта на всю ширину страницы.

Посмотрите на этот пример. Сайт выглядит прекрасно, когда разрешение монитора равно 1280 пикселей по ширине, если же ширина монитора больше, то фон выглядит обрубленным с обеих сторон.

Пример №1. Использование одного изображения.

Одним из самых простых решений проблемы является следующее: край изображения нужно сделать таким же цветом, как цвет фона тега <body>.

CSS код здесь очень простой. Определяем фоновое изображение, а также его расположение на странице.

Пример №2. Использование двух изображений.

Для этого примера мы будем использовать изображение, которое будет повторяться в качестве фона у тега <body> и центральное изображение, являющееся фоном тега <div>.

Для тега <div>, используем изображение в формате gif по цвету, сходное с цветом фона <body>.

Пример №3. Фон неба.

В этом примере мы используем полоску шириной 1 пиксель с градиентной заливкой, которая повторяется горизонтально для тега <body>. А для тега <div> в качестве фона стоит картинка с облаками.

Существуют и другие способы визуально увеличить размер фона сайта, для корректного отображения при разных разрешениях монитора.

Здесь вы можете посмотреть примеры их реализации.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com
Перевел: Сергей Патин
Урок создан: 26 Февраля 2009
Просмотров: 117075
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *