Добавить в избранное

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

Дата: 2011-12-01

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

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

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

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

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

body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
      }

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

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

.

 

Для тега

, используем изображение в формате gif по цвету, сходное с цветом фона .

 

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

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

в качестве фона стоит картинка с облаками.

 

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

 

Данный урок подготовлен для Вас сайтом tiwebmaster.ru
Источник урока: www.webdesignerwall.com

Просмотров: 2874

Последние 5 уроков

Стильное поле поиска на CSS3

Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.


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

Из этого урока Вы узнаете как сделать фон на всю страницу, при этом Вам будет не важно, какое разрешение на мониторе того посетителя, который будет смотреть Ваш сайт.


Смена фона блока информации при наведении мыши

Интересный эффект смены фона блока с текстом при наведении мыши. Реализовано с помощью HTML+CSS.


Как сделать красивую полосу прокрутки на Вашем сайте?

Изучив этот урок, Вы узнаете как изменить дизайн полосы прокрутки на Вашем сайте таким образом, чтобы она вписывалась в остальной дизайн сайта.


Делаем красивые CSS списки для сайта

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


Видео уроки по php,jquery,ajax,css,html,сео