Фоновый цвет и фоновое изображение в CSS

Здравствуйте, уважаемые читатели сайта 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;
 }

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

0

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Помоги проекту - подпишись на наш Яндекс.Дзен канал!