Здравствуйте, уважаемые читатели сайта 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;
}
Но в данном случае у нас исчерпывающий перечень положений куда можно поместить изображение
Нам же нужно разместить логотип в строго определенное место. И сделать это можно используя “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;
}
