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

0
876

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

Фон заголовка h1

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

Фоновое изображение – background-image

Давайте попробуем создать, что похожее на этот макет.

Создадим новый документ с шаблоном html и файл style.css, не забудьте также прописать пути к этому файлу (см. Урок CSS № 1). В новом документе css для начала пропишем серый фоновый цвет для “body”.

body {
 background-color: #c3c3c3;
 }

fon у body

Вот мы видим, что фоновый цвет “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;
 }

Выровним заголовок по центру

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

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.