Как сделать так, чтобы картинка в background-image не обрезалась, выходя за пределы элемента, у которого установлено это свойство?
<p class="background">some text</p>
.background{
background: url("image.jpg");
}
То есть, чтобы image.jpg не обрезалась, выходя за пределы p?
Если кратко - нельзя.
Можно элементу min-width и min-height поставить согласно размерам картинки.
Если хотите, чтобы картинка выходила за пределы элемента, то расположите ее абсолютно в блоке.
Ну чтобы ничего никуда не вылазило за пределы с жестко указанными размерами для div не возможно. Поскольку это обычная геометрия и ее законы. Но сделать так чтобы лишнее пряталось и размер картинки не менялся возможно.
1) Ставим картинку в сам див, или что там у вас.
<div class="my-some-class"><img src="/my-img.jpg" /></div>
2) Делаем стили блоку.
.my-some-class{overflow: hidden; width: 100px; height: 100px;}
Недостаток подхода в том что width и height указывать нужно обязательно. Чтобы разместить текст над картинкой, ставим ей абсолютное позиционирование. И текст под картинку.