CSS-фоновые изображения в WordPress

Ответ 1

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")
}

Ответ 2

Вам не нужно использовать PHP в этом вопросе, ваш файл CSS уже находится в папке с шаблонами, поэтому вы можете вызвать изображение так:

background-image: url("images/parallax_image.jpg");

Поэтому вам не нужно знать путь к шаблону для вызова изображений из вашей темы.

Ответ 3

Если папка с изображениями находится в папке темы, вы можете использовать:

background-image: url("/wp-content/themes/themeNameHere/images/parallax_image.jpg ");

Ответ 4

Используйте атрибут стиля в теге и используйте css.

<div style="background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");">
Your other html here
</div>

Ответ 5

Другим способом является обращение к изображению с использованием местоположения файла css в качестве контрольной точки, например. .class имя { Фоновое изображение: URL ( "изображения/имя файла.. /" ); // один уровень вверх, затем папка изображений background-image: url ( "../../images-directory-02/images/file-name" ); // два уровня вверх, затем две папки в }

Ответ 6

У меня возникла проблема с добавлением фонового изображения в тему, основанная на Underscores, и я нашел, что это работает:

background: url('assets/img/tile.jpg') top left repeat;

Сначала я попробовал:

background: url('/wp-content/themes/underscores/assets/img/tile.jpg');

но это не сработало для меня.

Ответ 7

Короткий ответ: вы не можете отобразить PHP в файле CSS. Я бы посоветовал убедиться, что тэг <rel> настроен правильно и просто используется часть /images/parralax_iamge.jpg.

Ответ 8

Просто найдите соответствующий элемент (тег, класс или идентификатор) с помощью инструментов/инспекторов браузера на своей странице и добавьте правило CSS для этого элемента, либо в таблицу стилей дочерней темы, либо в поле "customCSS" темы.

Ответ 9

Одним из способов было бы добавить этот CSS на страницу PHP, имеющую доступ к функции bloginfo(). Скажем в index.php, вы бы добавили...

<style>
  .some-element { 
    background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
  }
</style>

Ответ 10

вы не можете добавить php-код в .css файлы. но если вы хотите сделать это, используя php, см. this.

Ответ 11

Как уже многие люди уже не используют 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>

Ответ 12

Как и другие, вы можете просто установить CSS-свойство background-image для этого.

Однако ни один из URL-адресов, предлагаемых в других ответах, не работал для меня.

Я думаю, причина в том, что все мои изображения были сохранены в области "Медиа".

Для всех тех, кто хранит ваши изображения в разделе "Медиа":

Чтобы найти URL к изображению, вы можете:

1. Откройте панель администратора вашего сайта
2. Откройте область "Медиа"
3. Нажмите на изображение, которое вы хотите использовать
4. Скопируйте URL из поля URL, но только часть после имени домена (например, domain-name.com)
5. Используйте это как ваш 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/...

Ответ 13

В первом div вы можете увидеть результат из утвержденного ответа, во втором div вы можете увидеть результат из

<div style="background-image: url('<?= get_the_post_thumbnail_url();?>');">

Причина, по которой он не работает в первом div заключается в том, что синтаксический анализатор считает, что первый блок текста заканчивается там, где происходит второй ".