Background image richtig adressieren

[Liss]

Hallo, guten Tag!

zuerst bitte Nachsichtigkeit wegen Schriftfehler.

ich soll eine einsprachige Homepage, die in XAMPP entwickelt aber noch nicht ins Internet gestellt wurde, mehrsprachig machen.

Es sollen die Seiten sein

www.test.test/sell/de/index.php

www.test.test/sell/en/index.php

und später noch weitere.

index.php soll ein gemeinsames Programm sein, das über PHP die Sprachanpassungen vollziehn kann.

Links und includes funktioniernen schon.

Problem ist das background image.

Die CSSlib und die lyoutlib liegen im directory sell:

CSSlib (mehrere Versuche)

body
{
    background-image: url("/sell/layoutlib/bg.JPG");
/*  background-image: url("/layoutlib/bg.JPG");  */
/*  background-image: url("layoutlib/bg.JPG");  */
/*  background-image: url("../layoutlib/bg.JPG");  */

..............


} 

footer
{
    background-color:#.......;
}

... und und und .....

layoutlib

bg.JPG

[Auge]

Hallo

Links und includes funktioniernen schon.

Problem ist das background image.

Die CSSlib und die lyoutlib liegen im directory sell:

Bilder (und zum Beispiel auch Fonts) werden im CSS mit dem relativen Pfad zur CSS-Datei referenziert – oder absolut zur Domain.

CSSlib (mehrere Versuche)

body
{
    background-image: url("/sell/layoutlib/bg.JPG");
/*  background-image: url("/layoutlib/bg.JPG");  */
/*  background-image: url("layoutlib/bg.JPG");  */
/*  background-image: url("../layoutlib/bg.JPG");  */
} 

Wenn deine Angaben korrekt sind, und die CSS-Datei wie auch die Bilder im Verzeichnis sell liegen, wäre url("bg.JPG") korrekt. Wenn die CSS-Datei im Verzeichnis sell liegt und die Bilder in dessen Unterverzeichnis layoutlib zu finden sind, wäre url("layoutlib/bg.JPG") korrekt. Sollte die CSS-Datei im Unterverzeichnis CSSLib und die Bilder im Unterverzeichnis layoutlib zu finden sein, wäre die Angabe von url("../layoutlib/bg.JPG") korrekt.

Was mir aber aufstößt, ist der Dateiname bg.JPG. Auf welchem Betriebssystem läuft dein XAMPP? Sollte das ein Nicht-Windows-System sein, muss die Klein-und-Großschreibung des Dateinames passen. Auf unixoiden Systemen wie Unix, Linux oder MacOS sind bg.jpg, Bg.jPg und bg.JPG verschiedene Dateien, während es unter Windows einunddieselbe Datei wäre.

Tschö, Auge

[Liss]

Hallo, danke zuerst.

url("../layoutlib/bg.JPG")

müsste passen.

Ich verwende Windows. Vielmal habe ich die dir- und Dateinamen kontrolliert, auch Klein-großschreibung aber das Image wird nicht angezeigt.

Kann man die Verzeichnisstruktur in Codepen oder einem anderen Tool definieren? Dann könnte ich es dort für euch hineinstellen und/oder testen.

[Rolf B]

Hallo Liss,

wenn das Bild und das CSS im layoutlib Ordner stehen, ist ../layoutlib/bg.JPG redundant, dann reicht url('bg.JPG').

Verzeichnisstrukturen in Codepen kannst Du nicht abbilden, das geht nur auf einem Server.

Rolf

[Rolf B]

Hallo Liss,

• hast Du Dir tatsächlich www.test.test als DNS-Namen auf den XAMPP-Apache gelegt und rufst die Seite darüber auf?
• Falls das nicht so ist - ist der sell-Ordner tatsächlich im Webroot? Oder verwendest Du statt dessen sowas wie localhost:8080/testprojekt/sell/...? Oder vielleicht sogar file:///C:/users/liss/projekte/testprojekt/sell/...?

Das ist wichtig, denn die URL einer Ressource X ist immer relativ zu der URL der Ressource Y, von der sie eingebunden wird.

index.php schreibt HTML das ein Stylesheet lädt: Stylesheet-URL ist relativ zur URL von index.php

Styleheet lädt Hintergrundbild: URL des Hintergrundbildes ist relativ zur URL des Stylesheets.

Deshalb ist es ganz wichtig: Wie genau wird index.php aufgerufen? Wo ist dein Web-Root?

Rolf

[Liss]

Hallo

• hast Du Dir tatsächlich www.test.test als DNS-Namen auf den XAMPP-Apache gelegt und rufst die Seite darüber auf?

Ich wusste nicht, ob test.de ein gültiger Name im Internet ist, daher ich habe den Namen hier so angegeben

• Falls das nicht so ist - ist der sell-Ordner tatsächlich im Webroot?

sell-Ordner ist im root. Unterordner von sell sind csslib, layoutlib und de (als Landkz).

In der csslib steht die Datei norm.css mit dem Inhalt

body
{
    background-image: url("?????/bg.JPG");
..............

}

bg.JPG steht in der layoutlib,

in de steht die Datei index.php

Die Datei index.php wird aufgerufen und im Browser bis auf den Background korrekt angezeigt.

[Rolf B]

Hallo Liss,

ja klar ist test.de gültig – und von der Stiftung Warentest in Gebrauch.

Aber wenn die Verteilung von Ordnern und Dateien so ist, wie Du beschreibst, dann ist

url("../layoutlib/bg.JPG")

richtig.

Wenn der Hintergrund nicht erscheint, kann es auch andere Gründe haben. Die sollte man mit den Entwicklertools (F12-Taste) des Browsers erforschen.

Vor allem:

• auf dem Netzwerk-Tab: Wird der HTTP Request für das Bild fehlerfrei (Status 200) ausgeführt
• wenn der Request gar nicht ausgeführt wird, ist es eher ein CSS Thema. Prüfe auf der Element-Inspektor Seite, welche CSS Eigenschaften für den Body tatsächlich gelten und was überschrieben wird.
• wenn der Request fehlerhaft ausgeführt wird, die URL aber allem Anschein nach ok ist: (z.B. HTTP 404): Es mag sein, dass die Datei aus irgendeinem dummen Grund "bg.JPG " oder ähnlich heißt. Benenn sie mal in was anderes um und wieder zurück. Achte auf Leerstellen.
• wenn der Request korrekt ausgeführt wird: äh, ja. Welche Styles hat der Body noch? Welche Höhe hat er? Wenn Du zu den Superhelden gehörst, die alle Inhalte absolut positionieren, hat der Body und dann auch sein Hintergrundbild die Höhe 0. Da gibt's 1000 Möglichkeiten, dass irgendwas schiefgeht, was wir von ferne nicht beurteilen können.

Eine Testversion der Seite zur Onlinebetrachtung wäre wirklich hilfreich, aber vermutlich wegen des PHP Anteils nicht machbar…

Rolf