Что используют при верстке сайта по макету, div и к нему bg-img или же div с описанием стиля как на макете?

Question

[Максим]

Всех приветствую.
Новенький.

Верстаю с psd макета сайт. И столкнулся с такой для себя, "нубаса" - проблемой.

Есть psd шаблон, с него нарезаю элементы (картинки, формата jpeg и png), в папку img.
Соответственно далее, пытаюсь эти элементы с psd шаблона учитывая все "px" расположение заключить уже в верстке.
Но вот вопрос, есть (картинка) табличка, а на ней находится ( как отдельный элемент) текст. Как вообще верстается сие?

Создаю div, прописываю нужные размеры к этой области, и по Id, уже в css вставляю через background-img картинку на место отображения div. А потом вставляю span'ами текст на эту область ( то бишь в div).



Подскажите пожалуйста, опытные верстальщики, как вообще сие воплотить в жизнь? То бишь, как организовывать связку "картинка" + "текст" на ней - правильно. Можно даже вкратце, постараюсь уловить суть..

Извиняюсь, если не понятен вопрос.

Answer 1

[Ксения]

Можно (и удобней) div-у прописать background-image, а внутрь - текст, а можно - дивы в разных слоях с z-index, но это имеет смысл, если кроме текста у Вас еще элементы есть: фон, градиент, другая картинка и тп.
зы: psd-шаблон дербанить проще в Adobe assets
зызы: на скриншоте у Вас не вижу ни одного элемента, где нужна картинка - можно все это сделать на чистом css, так гораздо быстрее все будет крутиться. Загуглите