Установить изображение в качестве фона в div

Question

После очистки Интернета я нашел способ установить изображение Wordpress в качестве фонового изображения в div. Проблема в том, что я только умело устанавливаю стили для фонового изображения этого div в строке. Я хочу иметь возможность устанавливать стили в моем файле css, но я не уверен, как это сделать.

Вот мой код:

<?php 
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(5600,1000), false, ''); 
?> 
<div style="background: url(<?php echo $src[0]; ?>) no-repeat center; width:100%; height: 300px; background-size:cover;"></div> 

Любая помощь будет оценена.

Answer 1

Файлы CSS являются статическими, но размещенные в WordPress изображения и вложения являются динамическими. Лучший способ справиться с этим - установить background-image inline и установить остальные свойства фона в файле CSS.

PHP

<div class="featured-image" style="background-image: url('<?php echo esc_url($src[0]); ?>')"></div> 

HTML

.featured-image { 
    background: no-repeat center; 
    width: 100%; 
    height: 300px; 
    background-size: cover; 
} 

Answer 2

Используйте этот код с инлайн CSS echo wp_get_attachment_url(get_post_thumbnail_id());