Пятница, 29 марта, 2024

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

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Позиционирование в 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;
 }

Задали позицию логотипу справа

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

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

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

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

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

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

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

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему