Кто как адаптирует декоративные фоновые картинки?

Question

[Руслан Дасаев]

Всем доброго времени суток.Интересно, какие приемы вы используете при адаптации подобных картинок?

Я секции about прописал before со стилями для всех экранов плюс пару брейкпойнтов где изменял значение значение left

content: ''
		position: absolute
		bottom: 0
		left: 13%
		background: url(../img/about-pict.png) no-repeat center
		background-size: contain
		width: 550px
		height: 733px

Но такой подход очень неудобен, т.к при увеличении ширины экрана картинка потихоньку съезжает влево, а при уменьшении на определенном значении ширины начинает налазить на текст.Приходится прописывать кучу брейкпойнтов для left.На 4к картинка вообще далеко от текста.В container сетки она не влезает, выпирает слева.

Comments

[Сергей delphinpro]

картинка должна ориентироваться на центр

left: 50%

и потом ее можно сместить в нужную позицию

transform: translateX(-200px)

или

margin-left: -200px

[Руслан Дасаев]

Просто и быстро, спасибо!

Answer 1

[Антон Шаманов]

если есть psd исходник, то сохранить отдельно фон и рукафон, а блоки сделать html слоями