С тех пор, как автор выпустил коллекцию крупных фоновых веб -дизайнов, я получил множество электронных писем, спрашивающих, как использовать CSS для реализации крупных фоновых веб -дизайнов. Поэтому я решил поделиться с вами навыками дизайна веб -сайта на заднем плане. В этом уроке я буду использовать несколько примеров, чтобы проиллюстрировать, как использовать одну или два изображения для реализации проектирования большого фонового веб -сайта.
Часто делая ошибки: фон вырезан
Глядя на пример файла, нет проблем, когда это меньше 1280 разрешений. Но если ваш монитор имеет разрешение более 1280 пикселей, вы увидите часть вне фонового изображения.
Простое решение проблемы: установите цвет края изображения на тот же цвет, что и фон веб -страницы. Здесь я использую стену веб -дизайнера в качестве примера, посмотрите на картинку ниже и обратите внимание, что края картинки являются сплошными цветами.
CSS часть
Эта часть проста, установите фоновое изображение для элемента кузова (расположено в центре, вверху)
Вот код CSS:
| тело { Заполнение: 0; поля: 0; Предпосылки: #f8f7e5 url (wdw-bg.jpg) Центральный вершина без повторения; Ширина: 100%; дисплей: таблица; } |
Обратите внимание на тот факт, что в селекторе тела есть две дополнительные линии, так что фоновое изображение меняется, когда окно браузера меньше ширины содержания, которая появится в Firefox.
