Здравствуйте, уважаемые читатели сайта Uspei.com. Изучив на прошлом занятии рамки и блоки, мы переходим к большой и интересной теме о фоне CSS. Эти свойства (background-color и background-image) довольно часто используются в css, так что внимательно изучите урок. С помощью этих свойств вы легко сможете устанавливать понравившиеся вам фоны вашего сайта или даже установить фоновую картинку.
Фоновый цвет – background-color
Начнем с того, что каждый блок может иметь свой фоновый цвет или изображение. Изначально фон не задан, поэтому наш блок как бы прозрачен. Давайте зададим фоновый цвет тегу “body”.
body { font: 14px Tahoma; color: #333333; border: 2px solid #111111; padding: 15px; margin: 0 auto; width: 1000px; background-color: #f6f6f6; }
Теперь давайте зададим красный фон нашему блоку с заголовком Н1.
#header { text-align: center; padding: 40px; margin: 20px auto; width: 550px; background-color: #сс0000; }
Тут думаю, что все понятно. Но кроме фонового цвета мы можем использовать и фоновое изображение.
Фоновое изображение – background-image
Давайте попробуем создать, что похожее на этот макет.
Создадим новый документ с шаблоном html и файл style.css, не забудьте также прописать пути к этому файлу (см. Урок CSS № 1). В новом документе css для начала пропишем серый фоновый цвет для “body”.
body { background-color: #c3c3c3; }
Вот мы видим, что фоновый цвет “body” стал серым. Теперь в html документе внутри тега “body” нам нужно создать по центру блок “div” с id=”main” и отступами сверху и снизу.
<div id="main"></div>
Теперь в таблице стилей нашему блоку div зададим фиксированную высоту и ширину, положение, а также временно дадим ему золотистую рамку
#main { outline: 1px solid #FAA21A; width: 800px; height: 421px; margin: 29px auto; (29px - снизу и сверху, auto - справа и слева) }
Теперь наша задача поставить на фон этого блока изображение. Оно находится по этой ссылке. Сохраните изображение, нажав правой клавишей мыши “сохранить как” в папку “images”, которую нужно создать рядом с папкой “css”.
После этого, мы через свойство “background-image” прописываем на фон картинку. При этом не забудьте, что местоположение картинки указывается относительно папки css: (../image/bg.jpg). То есть браузер сначала должен выйти из папки css и зайти в папку image.
#main { outline: 1px solid #FAA21A; width: 800px; height: 421px; margin: 29px auto; background-image: url (../images/bg.jpg); }
Далее в нашем блоке div нам нужно написать текст.
<div id="main"> <h1>Company: EvCorporation</h1> </div>
Естественно, наш заголовок по умолчанию браузер прижал к верхней левой стороне. Теперь нам необходимо поместить его по центру, задать отступы и изменить шрифт.
#main { text-align: center; padding-top: 182px; font: 36px Verdana; }
Также не забывайте оптимизировать картинки перед их загрузкой на хостинг, а на следующем уроке мы изучим повтор фонового изображения.