Как сделать текст поверх картинки в динамических блоках на css в WP?

Question

[Андрей Филимонов]

Здравствуйте, как сделать текст поверх картинки, если этот блок будет менять своё положение на странице?

Суть:
блог на Wordpress
по задумке, к посту загружается миниатюра, а на неё накладывается текст, выглядит это вот так (страница с постом)

загружаю картинку через это поле

вот так

такая картинка одна и не будет менять своё положение, поэтому у текста заголовка position: absolute

Вопрос:
как реализовать наложение текста, когда таких постов много на странице?, Например тут
страница

через backgrond-image нельзя же, потому что не вписать <?php the_post_thumbnail(); ?> в свойствах css, и position: absolute нельзя использовать. Тогда как?

Comments

[Eugene Chefranov]

Вы можете путь к бекграунде записать инлайново

style="background-image: url(ваша ссылка на изображение);"

[Андрей Филимонов]

Jack Brown, так? style="background-image: url <?php the_post_thumbnail(); ?>;"

[Eugene Chefranov]

Андрей Филимонов, нет, так вы получить html код изображения. А вам нужна ссылка. Почитайте https://wp-kama.ru/function/the_post_thumbnail

[Андрей Филимонов]

Jack Brown, спасибо, да нужно style="background: url( <?php the_post_thumbnail_url(); ?> )

Answer 1

[Игорь Воротнёв]

через backgrond-image нельзя же, потому что не вписать <?php the_post_thumbnail(); ?> в свойствах css, и position: absolute нельзя использовать

Можно, просто вместо функции the_post_thumbnail(), которая выводит html-код изображения (то есть весть тег IMG), используйте функцию the_post_thumbnail_url(), которая выводит только URL картинки:

<div class="post-head" style="background: url( <?php the_post_thumbnail_url(); ?> );">
    <h1><?php the_title(); ?></h1>
</div>

Ну а через класс .post-head уже дополнительные стили вешаете.

Comments

[Андрей Филимонов]

Спасибо, то что нужно)