it-swarm.com.de

CSS-Hintergrundbilder in WordPress

Ist es möglich, ein Hintergrundbild in CSS zu erhalten, wie Sie es normalerweise bei der Arbeit mit WordPress in HTML tun. Ich habe es versucht, aber es funktioniert nicht.

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

PHP-Code kann nicht in der .css-Datei ausgeführt werden. Sie können jedoch Inline-Stil verwenden, z.

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

oder

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

Das Obige ist hilfreich, wenn Sie mit benutzerdefinierten Feldern für dynamische Bildpfade arbeiten.

Wenn sich das Bild im Designverzeichnis befindet, ist PHP nicht erforderlich. Nehmen wir an, der Bildordner befindet sich direkt unter dem Designordner /theme-name/images und das Stylesheet ist /theme-name/style.css. Dann können Sie einfach das Hintergrundbild zum Ordner hinzufügen CSS-Datei wie folgt:

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

Sie müssen PHP in dieser Frage nicht verwenden. Ihre CSS-Datei befindet sich bereits im Vorlagenordner. Sie können also ein Bild wie folgt aufrufen:

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

Sie müssen also keinen Vorlagenpfad kennen, um Bilder aus Ihrem Design aufzurufen.

4
Alex

Wenn sich der Bildordner im Designordner befindet, können Sie Folgendes verwenden:

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

Verwenden Sie ein Stilattribut im Tag und verwenden Sie das CSS.

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

Ich hatte dieses Problem mit dem Hinzufügen eines Hintergrundbildes zu meinem auf Unterstrichen basierenden Thema. Ich fand diese Arbeiten:

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


Ich habe zuerst versucht:

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

aber das hat bei mir nicht funktioniert.

1
Thinnling

Kurze Antwort ist, dass Sie PHP nicht in einer CSS-Datei darstellen können. Ich würde vorschlagen, sicherzustellen, dass Ihr <rel>-Tag korrekt eingerichtet ist und nur den /images/parralax_iamge.jpg-Teil verwendet.

0
Donny Bridgen

Result

Im ersten div sehen Sie das Ergebnis der genehmigten Antwort, im zweiten div sehen Sie das Ergebnis von

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

Der Grund, warum es im ersten div nicht funktioniert, ist, dass der Parser der Meinung ist, dass der erste Textblock dort endet, wo der zweite " tritt ein.

0
bem22

Suchen Sie einfach das entsprechende Element (Tag, Klasse oder ID) mit den Browser-Tools/Inspector auf Ihrer Seite und fügen Sie eine CSS-Regel für dieses Element hinzu, entweder im Stylesheet des untergeordneten Designs oder im Feld "customCSS" der Designoptionen.

0
Johannes

Da viele Leute vorgeschlagen haben, php nicht in .css ext zu verwenden, wird es nicht interpretiert.

Wenn Sie PHP wirklich aus bestimmten Gründen benötigen, die Sie nur wissen, wenn Sie nicht antworten, können Sie die Erweiterung Ihres Stylesheets in .php ändern

dann kannst du haben

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

Wie die anderen vorgeschlagen haben, können Sie einfach die background-image CSS-Eigenschaft, um dies zu tun.

Allerdings hat keine der URLs, die in den anderen Antworten vorgeschlagen wurden, für mich funktioniert.

Ich denke, der Grund dafür ist, dass alle meine Bilder im Bereich "Medien" gespeichert wurden.

Für alle, die Ihre Bilder im Bereich "Medien" speichern:

Um die URL zum Bild zu finden, können Sie:

  1. Öffnen Sie das Admin-Dashboard Ihrer Site
  2. Öffnen Sie den Bereich "Medien"
  3. Klicken Sie auf das Bild, das Sie verwenden möchten
  4. Kopieren Sie die URL aus dem URL-Feld, jedoch nur den Teil nach dem Domain-Namen (z. B. domain-name.com ).
  5. Verwenden Sie dies als URL für das background-image Eigentum

Ich würde nicht empfehlen, die gesamte URL zu verwenden (wenn Sie sie verwenden , ohne den Domain-Namen zu entfernen ), da die URL beschädigt wird, wenn sich Ihr Domain-Name ändert.

Hier ist ein Beispiel, wie meine vollständige URL aussah: https://example.com/wp-content/uploads/2018/06/<Name of the Image>.jpeg, aber ich habe nur den /wp-content/uploads/2018/06/<Name of the Image>.jpeg Teil.

Am Ende sah meine CSS-Eigenschaft so aus:

background-image: url("/wp-content/uploads/2018/06/<Name of the Image>.jpeg");

Als Randnotiz arbeitete die URL sowohl mit einem beginnenden Schrägstrich /wp-content/... und ohne wp-content/....

0
Fearnbuster

Eine Möglichkeit wäre, dieses CSS einer PHP - Seite hinzuzufügen, die Zugriff auf die Funktion bloginfo() hat. Sagen Sie in index.php, Sie würden hinzufügen ...

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

Eine andere Möglichkeit besteht darin, auf ein Bild zuzugreifen, wobei der Ort der CSS-Datei als Referenzpunkt verwendet wird, z. . Klassenname { Hintergrundbild: URL ("../ Images/Dateiname"); // eine Ebene höher, dann Images-Ordner-Hintergrundbild: URL ("../../images-directory-02/images/Dateiname"); // zwei Ebenen nach oben, dann zwei Ordner in }

0
Arlan T

sie können keinen PHP-Code in .css-Dateien einfügen. aber wenn du dies mit php machen willst, siehe this

0
Awais Khan