it-swarm.com.ru

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

Возможно ли получить фоновое изображение в CSS, как вы обычно делаете в HTML при работе с WordPress. Я пытался сделать это, но это не работает.

background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
10
Reece

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

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

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

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

4
Alex

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

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

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

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

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

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


Я впервые попробовал:

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

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

1
Thinnling

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

0
Donny Bridgen

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

0
Johannes

Как многие уже предлагали, не используйте 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>
0
Masivuye Cokile

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

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

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

0
Arlan T

вы не можете добавить код php в файлы .css. но если вы хотите сделать это с помощью php, посмотрите это

0
Awais Khan