Создание фона веб-страницы с помощью CSS

Иногда при создании веб страниц дизайнеру необходимо сделать в них фон. Этим фоном может быть любой рисунок, фотография или картинка - да все все, что подходит под определение "графический файл".

Конечно, при создании красивого фона сайт становится более привлекательным. Но тут есть и обратная сторона медали, с которой еще бороться и бороться - медленный инет. Так что перед созданием таких страниц хорошенько подумайте :)

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

Часть Первая: Выбор и подготовка изображения

Первым делом нам необходимо выбрать изображение, которое бы максимально подходило для использования в качестве фона веб странички.

Выбираем фотографию пошире

Фотография-кандидат на фон должна быть шириной как min в 1500 пикселей. Только так можно гарантировать, что даже на большом мониторе фоновое изображение всегда будет шире, чем окно браузера.

Фокусировка изображения

Советую выбирать такие фото, которые бы были максимально симметричными относительно своей вертикальной оси. Тогда эта самая фокусировка будет находиться где-то его центре.

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

Когда вы уже выбрали фото, то откройте его в программе Adobe Photoshop. Потом выберите Image > Image Size и установите разрешение (Resolution) в 72 DPI. Но перед тем, как нажать "OK", уберите галочку с 'Resample Image' внизу диалогового окна.

Далее вам потребуется создать такое - градиентный переход нижней части изображения. Чтобы это сделать, увеличьте его, используя команду Zoom (Z) на величину 100%. Используя инструмент Eyedroopper tool (I), выберите цвет поближе к низу картинки. В нашем случае это будет цвет #40413С. Запомните его - он нам еще пригодится.

А сейчас создадим новый слой и выберем инструмент Gradient tool. Первым делом убедитесь, что в качестве основного цвета выбран #40413С. Нам потребуется градиент 'Foreground to Transparent' (от основного цвета к прозрачному). Проведите его из точки выбора цвета #40413С вертикально. вниз. После этого создайте дубликат этого слоя и соедините его с фоном (background).

Еще немного поработаем с нашей фотографией. Можно увидеть, что у нас слишком много места на ней занимает небо. Так исправим это, просто обрезав его инструментом Crop (C). Должно получиться подобное этому:

Если есть желание, то можно поиграться с настройками Contrast, Brightness и т.п. А когда завершите, то выбирайте File > Save for Web, ставьте качество компрессии изображения 'JPEG High' и нажимайте Save. Сохраним наше фото в файле с названием 'background.jpg'.

Часть Вторая: Используем CSS для создания фона веб странички

Создайте папку с именем "images" и поместите в нее только что сохраненный файл background.jpg. Теперь создайте папку "photo background" и перенесите в нее папку "images".

Откройте ваш любимый html редактор (хотя вполне сгодится и блокнот). Создайте два файла - index.htm и style.css - и сохраните их в корне папки "photo background".

В файле style.css наберите такой код:

body { 
background: #40413C url(images/background.jpg); 
background-position: top center; 
background-repeat: no-repeat; 
margin-top: 350px; 
} 

А в файле index.htm разместим стандартный html-код со ссылкой на нашу таблицу стилей.

Когда вы все это завершите, можете открыть файл index.htm в вашем веб браузере. Как видите, наше фото благополучно разместилось на фоне странички. Все элементарно просто!

А сейчас приведу расшифровку кода нашей таблицы стилей style.css: