Html control image position

background — position

Фоновая картинка подчиняется этому свойству и занимает нужную позицию.

Время чтения: меньше 5 мин

Обновлено 20 декабря 2021

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.

Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="element">div>    Скопировать Скопировано Не удалось скопировать   

 .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat;> .element  background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat; >    Скопировать Скопировано Не удалось скопировать   

Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.

Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.

 .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

Или при помощи ключевых слов:

 .element  background-position: bottom right;> .element  background-position: bottom right; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Ключевые слова

Скопировать ссылку «Ключевые слова» Скопировано

Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.

 .element  background-position: left top;> .element  background-position: left top; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: center;> .element  background-position: center; >    Скопировать Скопировано Не удалось скопировать   

По центру по горизонтали и у нижнего края:

 .element  background-position: center bottom;> .element  background-position: center bottom; >    Скопировать Скопировано Не удалось скопировать   

Пиксели или другие единицы измерения длины

Скопировать ссылку «Пиксели или другие единицы измерения длины» Скопировано

Можно указать конкретное положение картинки в блоке.

10 px от левого края и 150 px от верхнего края:

 .element  background-position: 10px 150px;> .element  background-position: 10px 150px; >    Скопировать Скопировано Не удалось скопировать   

1 rem от левого края и по центру между верхом и низом:

 .element  background-position: 1rem;> .element  background-position: 1rem; >    Скопировать Скопировано Не удалось скопировать   

15 единиц ширины от левого края и 25 единиц высоты от верха:

 .element  background-position: 15vw 25vh;> .element  background-position: 15vw 25vh; >    Скопировать Скопировано Не удалось скопировать   

Проценты

Скопировать ссылку «Проценты» Скопировано

Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.

 .element  background-position: 100% 100%;> .element  background-position: 100% 100%; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: 50% 50%;> .element  background-position: 50% 50%; >    Скопировать Скопировано Не удалось скопировать   

 .element  background-position: 15% 5%;> .element  background-position: 15% 5%; >    Скопировать Скопировано Не удалось скопировать   

Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:

• Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
• Над картинкой 5% свободного места, а под ней — оставшиеся 95%.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство положения фона не наследуется.

💡 Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.

💡 Значение по умолчанию — 0% 0% (левый верхний угол).

💡 Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.

💡 Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.

💡 Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.

💡 Изменение положения фона можно анимировать при помощи свойства transition 🥳

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.

🛠 Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.

🛠 Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.

Источник

How to Position an Image in CSS?

The image position in CSS can be changed by using CSS properties like object-position property and float property. Object-position property is used to align the position with respect to the x,y coordinates of the image within its container. The float property is used to float an element inside the container toward the left or right side.

Pre-requisite

You should know how to use CSS properties on elements. This article will explain the object-position property and float property with an example that will be easy to understand.

Syntax

1. object-position property: The Syntax of object position property :

position can be a numerical value that specifies the distance from the left of the content box( i.e x axis ) and the distance from the top of the content box (i.e., y-axis). It can also take values like left, right, top, bottom, and initial and inherit them as a string to specify the position.

2. Float property : The Syntax of the float property :

Methods

Method 1: Using object-position Property

object-position property: The object position property is used to position any element within a container to the required position within the container. The < img >element or < video >element are mostly positioned within a container using the object position property.

The Syntax for the object position property is

Position can take numerical , specific string values , percentage , length , and edge offsets values . Some values are shown in the examples below.

Example Let’s see a simple example of object position property and place the img to the top left of the container.

Method 2: Using float Property

float property: float property is used to change the image position in CSS to the extreme left or extreme right of the container. Float is used to position an element only horizontally. The Syntax of the float property is as follows:

left: place the element to the extreme left of the container right: place the element to the extreme right of the container inherit: inherits floating property from its parent (div, semantic element, etc.) none: element is displayed at its original position as it is.

Some examples of float properties values are as follows:

Let’s take an example in which float property is being used on an actual image :

The output of the above HTML code using the float right property is:

Conclusion

• object-property and float properties are used to position an element inside a container.
• object-position property can be used to change the image position in CSS both horizontally as well as vertically within the container of the image.
• float property can be used to change the image position in CSS horizontally within the container of the image.
• The position property in the object position can take both numerical values as well as some specified string values like left, right, top and bottom.
• Float property takes some specific values like left, right, inherit, and none.

Источник

Html control image position

Learn Latest Tutorials

Preparation

Trending Technologies

B.Tech / MCA

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

• Website Designing
• Website Development
• Java Development
• PHP Development
• WordPress
• Graphic Designing
• Logo
• Digital Marketing
• On Page and Off Page SEO
• PPC
• Content Development
• Corporate Training
• Classroom and Online Training
• Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

Like/Subscribe us for latest updates or newsletter

Источник

How to position an image anywhere with CSS

We can position an image anywhere inside a parent container. We usually align an image horizontally to left, center and right by using different CSS tricks. But by using position:absolute , we can align an image both horizontally and vertically; not only to center or right but in any position- near top, bottom, left or right edge of a container.

Noted, in this way, not only image, we can also set position of other html elements like p , h , div and so on.

So no more ado. Let’s start to move on practical ground.

How position:absolute works to position an image

To make position:absolute work to position an image anywhere, do the followings:

• Take a container div .
• Style the div with position:relative .
• Style the div with width and height value. You can also set other property if you wish.
• Take img element inside the div .
• Style the img with position:absolute .
• To fix definite position of img ; style the image with top, bottom, left and right property. Noted, set value in any one of Top and Bottom property. Also set value in any one of Left and Right property.
• Image width and height value must be lower than that of div .
• Set other property:value with img if you wish.

Position 1: Align image near top-right

To keep things simple, we’re using inline CSS. First, let’s style the container div:

Now set the image attributes with style:

Position 2: Align image near bottom-right

Position 3: Align image near bottom-left

Position 4: Align image near top-left

Position 5: Align image on center horizontally and vertically

Hope you can position the image in any other places beyond the shown examples by using the defined rules.

Comment, please!!

Источник