Как это правильно сверстать?

Question

[littleguga]

Есть примерно такой макет:
Нужно, чтобы он был на весь экран(width и height 100%) + media, чтобы на маленьких экранах не ломалось.
Но как расположить текст, чтобы при изменении размера экрана он оставался на своем месте?
Макет 1920х1080.

Есть пока мысли:
1. margin-top/margin-left, но они задаются от ширины экрана, от чего всё равно съезжает.
2. оставить всё фоновой картинкой, без выделяемых элементов(вроде говнокодерское решение)

Заранее благодарен за ответ!

Answer 1

[The Dragger]

floae: right
или
position: absolute;

Comments

[littleguga]

Спасибо, затупил. Можно же абсолютно в % позиционировать, а не margin задавать.

Answer 2

[KurtsKhalia]

Не совсем понял, Если нужно, чтобы просто текст оставался справа, то картинку фоном, а алигн текста вправо.
Или если нужно, чтобы человек и текст были по разные стороны, то делайте блок с человеком, блок с текстом, одному флоат направо, другому налево. И в зависимости от размеров экрана корректируйте размер человечка. А фоном под два блока пустите однородную среду какую-нибудь.
Ну и абсолютным позиционированием от краев бразуера можно тоже.

Comments

[littleguga]

Чтобы текст всегда был на уровне глаз человека

Answer 3

[whats]

Стоит понять, что есть общего у изображения и текста ? У них есть общие условные блоки которые их окружают, теперь что есть общего у этих блоков ? Так как нам нужно точно выставить текст по вертикали то обращаем внимание только на эту сторону! Общая у них середина, как бы мы не крутили страницу, 2 блока выровненные по середине всегда будут относительно друг друга стоять ровно как и должны, дальше все просто, от середины блока с текстом делаете маргины или относительное позиционирование. И все у вас получается.

Все варианты выше не верны

Answer 4

[tef]

Самое лучшее решение конечно же оставить всё фоновой картинкой. И самое главное обязательно оставить левую часть как в вашем примере. Без этого ничего не получиться.

Comments

[littleguga]

Непременно.