Здравствуйте, уважаемые читатели сайта 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;
}
Также не забывайте оптимизировать картинки перед их загрузкой на хостинг, а на следующем уроке мы изучим повтор фонового изображения.