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

В этом уроке мы поговорим о том, как с помощью различных 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> в качестве фона стоит картинка с облаками.

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

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

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


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 26 Февраля 2009 22:02
    Воля
    Надо Вам, Евгений, учиться и учиться еще, а сейчас и вправду статьи некудышные!
  • 26 Февраля 2009 22:41
    Евгений
    Ну так я учусь потихоньку...
  • 26 Февраля 2009 22:43
    Евгений
    ...и я учусь потихоньку.
  • 26 Февраля 2009 22:59
    raferti
    Да все норм че вы! хорошая статья. Я так понимаю на сайте статьи разной сложности. Эта например простенькая)
  • 27 Февраля 2009 08:42
    Андрей
    Было бы лучше если вы не просто переводили чужие статьи, а дорабатывали их самостоятельно
  • 27 Февраля 2009 23:35
    Валерий
    Евгений! не обращайте внимание на завистные глаза! Благодаря вам и вашим урокам я достиг таааких высот что мне и не снились! Спасибо вам!! искренни вам признателен
  • 2 Марта 2009 08:46
    hlystov5
    Воля вы не правы,тут все статьи отличные,особенно новичкам как я очень помогает.
  • 2 Марта 2009 13:02
    Виталий Н.
    Статья классная. Не важно откуда взята или написана самим Евгением. Главное что он всю интересную информацию предлагает своим посетителям и ученикам. Я вот, например, такую статью давно искал, а нашёл именно здесь.
  • 2 Марта 2009 19:25
    Игорь
    Евгений, такая информация мне как раз сейчас нужна была...в любом случае на всех не угодишь...поэтому спасибо!
  • 4 Марта 2009 23:10
    Анатолий
    То чего добился Евгений в плане видеокурсов - много, за такой промежуток времени. Что касается данного сайта, есть улучшения.
  • 11 Марта 2009 21:36
    Sasha
    Изменяюсь за глупый вопрос, но я все таки пришел сюда чтобы учится! Значиться так! Как задать тегу <div> фон я понял, но вот как его расположить на странице так чтобы он был за таблицей с контентом и при этом при любом мониторе был на месте я что то не понял!?
  • 31 Марта 2009 13:57
    Denver
    Как можно сделать 2 изображения фоном+повторить по Y. У меня 2 файла, и хочу расположить слева и справа. Первое я расположил, второе в правом углу не получается.
  • 14 Мая 2009 12:27
    Andrey
    Странно у меня с параметром display: table не работало, Mozzila 3.0.10 и Opera 9.64. Убрал его и всё заработало
  • 27 Июня 2009 21:10
    narcoz
    А можно подробней описать как совместить фоновые картинки DIV и BODY
  • 6 Декабря 2010 16:22
    vipcheerfulmen
    СПАСИБО ЗА УРОК! ГДЕ ТО ЧАС БИЛСЯ НАД ЭТОЙ ПРОБЛЕМОЙ И ВСПОМНИЛ ПРО ТВОЙ САЙТ! СПАСИБО, РЕСПЕКТ И УДАЧИ!!!
  • 1 Марта 2012 13:11
    ggg2017
    НЕ выдержала душа поэта! Вот ссылка на примеры:
    http://www.webdesignerwall.com/file/css-large-background.zip
  • 4 Января 2014 19:04
    viorica
    Добрый вечер.Я новичек,у меня фон градиент+небольшой рисунок.Посоветуйте как мне прописать код.Много раз пыталась никак не получается :-(
^ Наверх ^