web-dev-qa-db-fra.com

Images de fond CSS dans WordPress

Est-il possible d’obtenir une image d’arrière-plan en CSS comme vous le faites normalement en HTML lorsque vous travaillez avec WordPress. J'ai essayé de faire ça mais ça ne marche pas.

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

Le code PHP ne peut pas être exécuté dans le fichier .css; toutefois, vous pouvez utiliser un style intégré, tel que:

<div style="background-image: url("<?php //url ?>");">

ou

<style>
  .class-name {
    background-image: url("<?php //url ?>");
  }
</style>

Ce qui précède serait utile lorsque vous utilisez des champs personnalisés pour des chemins d’image dynamiques.

Si l'image se trouve dans le répertoire du thème, PHP ne sera pas nécessaire, supposons que le dossier de l'image se trouve directement sous le dossier du thème /theme-name/images, et que la feuille de style soit /theme-name/style.css, vous pouvez simplement ajouter l'image de fond au dossier. fichier css comme suit:

.class-name {
  background-image: url("images/file.jpg")
}
16
Stickers

Vous n'avez pas besoin d'utiliser PHP dans cette question, votre fichier CSS est déjà dans le dossier du modèle, vous pouvez donc appeler l'image de la manière suivante:

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

Vous n'avez donc pas besoin de connaître le chemin du modèle pour appeler des images de votre thème.

4
Alex

Si le dossier de l'image est dans le dossier du thème, vous pouvez utiliser:

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

Utilisez un attribut de style dans la balise et utilisez le css.

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

J'avais ce problème avec l'ajout d'une image de fond à mon thème basé sur Underscores et j'ai trouvé que cela fonctionne:

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


J'ai d'abord essayé:

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

mais cela n'a pas fonctionné pour moi.

1
Thinnling

La réponse courte est que vous ne pouvez pas rendre PHP dans un fichier CSS. Je vous suggère de vous assurer que votre balise <rel> est configurée correctement et que vous utilisez simplement la partie /images/parralax_iamge.jpg.

0
Donny Bridgen

Il vous suffit de rechercher l’élément correspondant (balise, classe ou ID) avec les outils/inspecteur du navigateur dans votre page et d’ajouter une règle CSS à cet élément, soit dans la feuille de style du thème enfant, soit dans le champ "customCSS" des options du thème.

0
Johannes

Comme beaucoup de gens l'ont déjà suggéré, n'utilisez pas php dans .css ext car il ne sera pas interprété.

Mais si vous devez vraiment utiliser php pour des raisons que vous ne connaissez que parce que vous ne répondez pas, vous pouvez changer l'extension de votre feuille de style en .php

alors vous pouvez avoir

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

Une solution serait d’ajouter ce CSS à une page PHP ayant accès à la fonction bloginfo(). Dites en index.php, vous ajouteriez ...

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

Une autre manière consiste à accéder à une image en utilisant l’emplacement du fichier css comme point de référence, par exemple. . nom-classe { image-fond: url ("../ images/nom-fichier"); // un niveau supérieur, puis le dossier images background-image: url ("../../ images-directory-02/images/nom-fichier"); // deux niveaux, puis deux dossiers dans }

0
Arlan T

vous ne pouvez pas ajouter de code php dans les fichiers .css. mais si vous voulez faire cela en utilisant php voir ceci . 

0
Awais Khan