В этом уроке мы поговорим о том, как с помощью различных CSS приемов сделать фон сайта на всю ширину страницы.
Посмотрите на этот пример. Сайт выглядит прекрасно, когда разрешение монитора равно 1280 пикселей по ширине, если же ширина монитора больше, то фон выглядит обрубленным с обоих сторон.
Пример №1. Использование одного изображения.
Одним из самых простых решений проблемы является следующее: край изображения нужно сделать таким же цветом, как цвет фона тега <body>.
CSS код здесь очень простой. Определяем фоновое изображение, а также его расположение на странице.
body {
padding: 0;
margin: 0;
background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;
width: 100%;
display: table;
}Пример №2. Использование двух изображений.
Для этого примера мы будем использовать изображение, которое будет повторяться в качестве фона у тега <body> и центральное изображение, являющееся фоном тега <div>.
Для тега <div>, используем изображение в формате gif по цвету, сходное с цветом фона <body>.
Пример №3. Фон неба.
В этом примере мы используем полоску шириной 1 пиксель с градиентной заливкой, которая повторяется горизонтально для тега <body>. А для тега <div> в качестве фона стоит картинка с облаками.
Существуют и другие способы визуально увеличить размер фона сайта, для корректного отображения при разных разрешениях монитора.
