Современный веб — это мир, где один и тот же сайт открывают на ноутбуке, смартфоне, планшете и огромном 4K-мониторе. И если верстка ещё кое-как переживает такие эксперименты, то изображения без правильной настройки быстро превращаются в главную боль интерфейса. В этой статье разберёмся, что такое резиновые изображения, зачем они нужны, почему box-sizing не спасает, как правильно использовать calc() и чем принципиально отличаются контентные и фоновые изображения. Итак, поехали. Резиновыми называют изображения, размеры которых зависят от размеров родительского блока...

Продолжаем говорить про свойство background. CSS код .block{ background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 0 0; } или так .block{ background: url('img/background/avatar.jpg') top left no-repeat; } Можно и так .block{ background: url('img/background/avatar.jpg') 0 0 no-repeat; } Размещение по центру элемента CSS код .block{ background-image: url('img/background/avatar.jpg');background-repeat: no-repeat;background-position: 50% 50%; } или так .block{ background: url('img/background/avatar.jpg') center no-repeat; } можно итак .block{ background: url('img/background/avatar...