Позиционирование фона в CSS (background-position)


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

Установим логотип путем позиционирования изображения

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

#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;
 }

вернем контуры нашим элементам

Теперь на фон заголовка Н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;
 }

Добавили логотип на страницу

Как мы и ожидали, браузер разместил наш логотип в левом верхнем углу. Теперь мы должны поставить его на нужное место. Делается это с помощью нового свойства "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. Высота и ширина, выравнивание.

Возможные позиции

Нам же нужно разместить логотип в строго определенное место. И сделать это можно используя "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;
 }

Зададим его расположение по горизонтали и по вертикали

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

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях

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

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

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