Как установить фон в css картинкой

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

Здравствуйте, уважаемые читатели сайта Uspei.com. Изучив на прошлом занятии рамки и блоки, мы переходим к большой и интересной теме о фоне CSS. Эти свойства (background-color и background-image) довольно часто используются в css, так что внимательно изучите урок. С помощью этих свойств вы легко сможете устанавливать понравившиеся вам фоны вашего сайта или даже установить фоновую картинку.

Фоновый цвет — background-color

Начнем с того, что каждый блок может иметь свой фоновый цвет или изображение. Изначально фон не задан, поэтому наш блок как бы прозрачен. Давайте зададим фоновый цвет тегу "body".

Фоновый цвет

Теперь давайте зададим красный фон нашему блоку с заголовком Н1.

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

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

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

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

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

fon у body

Вот мы видим, что фоновый цвет "body" стал серым. Теперь в html документе внутри тега "body" нам нужно создать по центру блок "div" с и отступами сверху и снизу.

Теперь в таблице стилей нашему блоку div зададим фиксированную высоту и ширину, положение, а также временно дадим ему золотистую рамку

Зададим размеры блоку

Теперь наша задача поставить на фон этого блока изображение. Оно находится по этой ссылке. Сохраните изображение, нажав правой клавишей мыши "сохранить как" в папку "images", которую нужно создать рядом с папкой "css".

Скачайте фоновую картинку

После этого, мы через свойство "background-image" прописываем на фон картинку. При этом не забудьте, что местоположение картинки указывается относительно папки css: (../image/bg.jpg). То есть браузер сначала должен выйти из папки css и зайти в папку image.

Далее в нашем блоке div нам нужно написать текст.

Поместим на изображение заголовок

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *