CSS. Позиционирование фона (Урок 8)

 CSSСегодня у нас на очереди такая тема, как позиционирование фона. Другими словами, изучив этот урок, вы сумеете разместить ваше фоновое изображение в любое место окна браузера, куда пожелаете. Это очень удобно и активно используется при создании и редактировании сайтов.Вы уже заметили, что при установке фоновой картинки браузер по умолчанию всегда размещает ее в левом верхнем углу. Мы должны научиться размещать наше изображение в любой точке окна браузера. Давайте разместим логотип на страницу нашего импровизированного сайта из прошлых уроков.

 CSS

 

У нашего блока div уже есть фоновая картинка, которую мы установили в прошлом уроке, поэтому данный логотип мы будем ставить на фон заголовка Н1.  Для этого мы вернем контуры нашим элементам, чтобы видеть их границы и правильно спозиционировать фон

 

#main {

outline: 1px solid #FAA21A;

width: 800px;

height: 421px;

margin: 29px auto; 

background-image: url (…/images/bg_s.jpg);

background-repeat: repeat-x;

}

 

#main H1{

outline: 1px solid #cc0000;

text-align: center;

padding-top: 182px;

font: 36px Verdana;

}

 CSS

 

Теперь на фон заголовка Н1 мы ставим фоновую картинку «logo.png». Чтобы ваше изображение не размножилось по экрану, не забудьте запретить повторение.

#main H1{

outline: 1px solid #cc0000;

text-align: center;

padding-top: 182px;

font: 36px Verdana;

background-image: url (…/images/logo.png);

background-repeat: no-repeat;

}

 CSS

Как мы и ожидали, браузер разместил наш логотип в левом верхнем углу. Теперь мы должны поставить его на нужное место. Делается это с помощью нового свойства «background-position».  При этом существует два способа задания значения данной позиции. Можно задать словами, например, right (справа) center (по центру)

#main H1{

outline: 1px solid #cc0000;

text-align: center;

padding-top: 182px;

font: 36px Verdana;

background-image: url (…/images/logo.png);

background-repeat: no-repeat;

background-position: right center;

}

 CSS

 

Нов данном случае у нас исчерпывающий перечень положений куда можно поместить изображение

 CSS

 

Нам же нужно разместить логотип в строго определенное место. И сделать это можно используя «px». Зададим его расположение по горизонтали и по вертикали

 

#main H1{

outline: 1px solid #cc0000;

text-align: center;

padding-top: 182px;

font: 36px Verdana;

background-image: url (…/images/logo.png);

background-repeat: no-repeat;

background-position: 134px 190px;

}

CSS

 

Увидимся в следующем уроке!

 

Урок подготовлен по материалам Евгения Попова, который является грамотным специалистом в данной теме. Я когда-то сам проходил обучение по его видео-курсу «Все технические моменты онлайн-бизнеса в видеоформате», с которым вы при желании можете ознакомится по этой ссылке.
Видео-курс Е. Попова
Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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