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