Как сместить изображение фона?

179

28 марта 2018, 03:01

допустим изображение 1600х1000 на сайте отведенно для него высота 500пиксилей и отображается оно не полным как можно подвинуть его вверх что бы нижняя часть была видна?

Answer 1

background-position: 50% 100%;

Первое значение - расположение фонового изображения по оси х, 50% - оно будет по центру, второе значение - расположение по оси y, 100% - будет от нижнего края элемента.

Answer 2

К примеру: я взял изображение большого размера вот оно и есть блок как требуется в ширину 500px и нам нужно сместить фон в нижний правый край то делается это так :

.positionir{ 
  width:500px; 
  height:400px; 
  background:url(https://cdn.wallaps.com/wallpapers/150000/144909.jpg); 
  background-position:bottom right; 
}

<div class="positionir"></div>

Answer 3

Если нужно, чтобы изображение было полностью влезло, то нужно использовать background-size: contain, но обычно используют background-size: cover, изображение немного обрежется, но оно займет всю площадь контейнера.

Вот тут все подробно разжевано и наглядно показано.