Возможно ли получить фоновое изображение в CSS, как обычно, в HTML при работе с WordPress. Я пробовал это делать, но это не сработало.
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
Возможно ли получить фоновое изображение в CSS, как обычно, в HTML при работе с WordPress. Я пробовал это делать, но это не сработало.
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
PHP-код не может работать в .css
файле, однако вы можете использовать встроенный стиль, например:
<div style="background-image: url("<?php //url ?>");">
или
<style>
.class-name {
background-image: url("<?php //url ?>");
}
</style>
Выше было бы полезно при работе с настраиваемыми полями для путей динамических изображений.
Если изображение находится в каталоге тем, PHP не понадобится, скажем, папка с изображениями находится непосредственно под папкой темы /theme-name/images
, а таблица стилей /theme-name/style.css
, тогда вы можете просто добавить фон образ в файл css следующим образом:
.class-name {
background-image: url("images/file.jpg")
}
Вам не нужно использовать PHP в этом вопросе, ваш файл CSS уже находится в папке с шаблонами, поэтому вы можете вызвать изображение так:
background-image: url("images/parallax_image.jpg");
Поэтому вам не нужно знать путь к шаблону для вызова изображений из вашей темы.
Если папка с изображениями находится в папке темы, вы можете использовать:
background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");
Используйте атрибут стиля в теге и используйте css.
<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>
Другим способом является обращение к изображению с использованием местоположения файла css в качестве контрольной точки, например. .class имя { Фоновое изображение: URL ( "изображения/имя файла.. /" ); // один уровень вверх, затем папка изображений background-image: url ( "../../images-directory-02/images/file-name" ); // два уровня вверх, затем две папки в }
У меня возникла проблема с добавлением фонового изображения в тему, основанная на Underscores, и я нашел, что это работает:
background: url('assets/img/tile.jpg') top left repeat;
Сначала я попробовал:
background: url('/wp-content/themes/underscores/assets/img/tile.jpg');
но это не сработало для меня.
Короткий ответ: вы не можете отобразить PHP в файле CSS. Я бы посоветовал убедиться, что тэг <rel>
настроен правильно и просто используется часть /images/parralax_iamge.jpg
.
Просто найдите соответствующий элемент (тег, класс или идентификатор) с помощью инструментов/инспекторов браузера на своей странице и добавьте правило CSS для этого элемента, либо в таблицу стилей дочерней темы, либо в поле "customCSS" темы.
Одним из способов было бы добавить этот CSS на страницу PHP, имеющую доступ к функции bloginfo()
. Скажем в index.php
, вы бы добавили...
<style>
.some-element {
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
}
</style>
вы не можете добавить php-код в .css файлы. но если вы хотите сделать это, используя php, см. this.
Как уже многие люди уже не используют php в .css ext, поскольку он не будет интерпретироваться.
Но если вам действительно нужно использовать php из-за некоторых причин, о которых вы только знаете, поскольку не отвечаете, вы можете изменить расширение своей таблицы стилей на .php
то вы можете иметь
customestyles.php
<?php
header("Content-type: text/css; charset: UTF-8");
$sectionImage = bloginfo('template_directory')."/images/parallax_image.jpg";
?>
<style type="text/css">
.selector{
background-image: url(<?php echo "$sectionImage";?>);
}
</style>
Как и другие, вы можете просто установить CSS-свойство background-image
для этого.
Однако ни один из URL-адресов, предлагаемых в других ответах, не работал для меня.
Я думаю, причина в том, что все мои изображения были сохранены в области "Медиа".
Для всех тех, кто хранит ваши изображения в разделе "Медиа":
Чтобы найти URL к изображению, вы можете:
background-image
Я бы не рекомендовал использовать весь URL (используя его, не удаляя имя домена), потому что если ваше доменное имя когда-либо изменится, URL сломается.
Вот пример того, как мой полный URL выглядел: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg
, но я использовал только /wp-content/uploads/2018/06/<Name of the Image>.jpeg
часть.
В конце концов, мое свойство CSS выглядело так:
background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");
Как примечание, URL работал как с косой чертой начала /wp-content/...
и без одного wp-content/...
В первом div
вы можете увидеть результат из утвержденного ответа, во втором div
вы можете увидеть результат из
<div style="background-image: url('<?= get_the_post_thumbnail_url();?>');">
Причина, по которой он не работает в первом div
заключается в том, что синтаксический анализатор считает, что первый блок текста заканчивается там, где происходит второй "
.