Как правильно использовать z-index?

Question

[Askadena]

День Добрый
недавно начал заниматься вёрсткой, и наткнулся на такую проблему
Вот есть фото на тело сайта.
, поверх него я пишу какой либо текст, но он появляется сверху поверх фото, либо его вообще не видно. хочу сделать это правильно не написав гавнокода. Слышал про z-index но где только не читал , всё равно не получалось.

Answer 1

[Сергей Горячев]

Ну, чтобы не говнокодить, сделай эту картинку через background-image.
Тогда и не придется огород городить с z-index'ами.

Comments

[Askadena]

Как потом обращаться к этой фотографии если я подключил её в css ? Ну если мне нужно будет ей там ширину изменить, в моём случае она сейчас в левую сторону ушла.

[Сергей delphinpro]

Askadena: ну так пропиши ее в html, какие проблемы - <div style="background-image:url()"></div>
Важно писать именно background-image, чтобы остальные стили фона можно было задать в css (позицию, размер, повторение и т.д.)

[Сергей Горячев]

Askadena: Ну, вообще, не понятна цель обращения к ней.
Но если прям сильно нужно, можно и инлайном сделать, не страшно же.

<div style="background-image: url();">Тут текст или другие блоки</div>

[Андрей Токмаков]

Askadena: Зачем Вам в к ней обращаться? Да и собственно если возникают такие вопросы, то без гавнокода не обойтись, нет элементарных знаний = гавнокод

[Сергей Горячев]

Askadena: Но и обратиться к ней можно, просто я сути не понимаю, зачем она может потом понадобиться.

[ThunderCat]

Askadena: Обращайтесь по имени отчеству - Эменем Джонович ). А в целом - для чего и зачем вы "обращаетесь" к ней?

[Askadena]

Сергей: сейчас попробую

[Сергей delphinpro]

Сергей Горячев, @ThunderCat

Ну, вообще, не понятна цель обращения к ней.

Цель обращения к ней очевидна - возможность управления из админки.

[Сергей Горячев]

Сергей: ThunderCat: Да я подумал об этом, но меня немного смутило, что человек только начал заниматься версткой, какие уж тут админки, казалось бы. Да и вроде фоновые картинки редко через админку управляются. Ну, да может быть)

[Askadena]

Сергей Горячев: в таком случае она будет открываться по высоте вместе с текстом. Если укажу ей высоту допусти м 800рх то она уже не будет растягиваться, и на всех устройствах будет показываться 800рх ?

[Сергей delphinpro]

Сергей Горячев: бывает. не так уж и редко хотят иметь возможность сменить картинки

[Сергей delphinpro]

Предусмотреть это заранее - хороший тон. Главное без фанатизма - не всё подряд так выносить =)

[Askadena]

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

[Сергей Горячев]

Askadena: Не совсем улавливаю суть вопроса, но попробую ответить. Для того, чтобы на всех устройствах работало корректно, красиво, растягивалось, подстраивалось под размеры экрана, нужно использовать не px, а % или vw/vh единицы.

[Askadena]

Сергей Горячев: спасибо, сейчас соберу и попробую решить
спасибо ;)

[ThunderCat]

Сергей:

Цель обращения к ней очевидна - возможность управления из админки.

Ну так пропишите инлайновый стиль, урл до картинки сделайте переменной, и вообще - сильно зависит от того как вы будете администрировать главную.