Hintergrundbild für einzelne Beiträge

misel · 13. Februar 2018

Hallo,
Ich will für einen Beitrag ein Hintergrund Bild haben. Ich benutze das Template protostar. Ich habe bereits im Internet danach gesucht, war jedoch nicht zu meinem Thema zutreffend. Ich habe leider kaum Ahnung von css.
Danke schon Mal im voraus.

Indigo66 · 13. Februar 2018

Das ist Temlateunabhägig. Erstelle ienen Seitenklassensuffix über die Menüpuntoptionen. Über diese Klasse kannst Du den Beitrag per CSS stylen und auch einen Hintergund vergeben.

misel · 13. Februar 2018

Wie muss ich das dann in CSS einbinden bzw. kannst du mir bitte einen Beispielcode geben?

skodi · 13. Februar 2018

Hallo misel,
ich habe das schon mal gemacht, ebenfalls im Template protostar.
Hier mal eine kurze Anleitung wie ich das gemacht habe. (Geht wahrscheinlich sauberer und eleganter - aber es geht).

misel · 13. Februar 2018

Hallo,
Danke für deine Antwort. Leider klappte das bei mir nicht. Ich habe hier Mal ein paar Screenshots, evtl. habe ich etwas falsch gemacht?

skodi · 13. Februar 2018

Hi,
mach mal in deiner CSS-Datei bei der Klasse das leerzeichen weg.

also anstatt:
.item-page hintergrundbild1

schreibst du:
.item-pagehintergrundbild1

misel · 13. Februar 2018

Hi,
Immer noch gleich

deGobbis · 13. Februar 2018

der Pfad in deiner CSS ist möglicherweise falsch.
Nimm mal statt
./httpdocs/magohneumlaut/templates/protostar/images/mauer2.png
/templates/protostar/images/mauer2.png außer der Ordnername magohneumlaut ist in der URL, dann
/magohneumlaut/templates/protostar/images/mauer2.png
aber einer der Beiden sollte gehen

misel · 13. Februar 2018

Hallo deGobbis,
Funktionierte leider auch nicht. Ich habe die beiden Pfade, welche du geschrieben hast 1 zu 1 kopiert und eingefügt.

Code

.item-pagehintergrundbild1 {background-image: url('/magohneumlaut/templates/protostar/images/mauer2.png');background-repeat: no-repeat;

Code

.item-pagehintergrundbild1 {
background-image: url('/templates/protostar/images/mauer2.png');
background-repeat: no-repeat;

deGobbis · 13. Februar 2018

Ist die Seite online erreichbar, damit man sich das mal ansehen kann?

chr-hl · 13. Februar 2018

Moin,
m.E. sollte folgendes funktionieren:
background-image: url(../images/eigene/mauer2.png);

Christian

chr-hl · 14. Februar 2018

Noch eine Ergänzung, die ich wegen Zeitablauf dem vorangegangenen Beitrag nicht mehr hinzufügen kann:

user.css siehe auch hier

Christianhttp://develop.linsner-luebeck…m-template-protostar.html

misel · 14. Februar 2018

Guten Abend,
Ich habe es mit der user.css versucht. Einen anderen Pfad habe ich auch versucht, leider erfolglos.
Es wäre der Beitrag Renovation/Maurerarbeiten https://mag-baugeschaeft.ch

chr-hl · 14. Februar 2018

Hallo in die Schweiz,

wo befindet sich das Bild "mauer2.png" wirklich?
Es kann m.E. nicht im Unterverzeichnis "images" von "protostar" befinden!!!

In diesem Verzeichnis befindet sich standardmäßig die Grafik logo.png und die wird auch angezeigt:
.item-pagehintergrundbild1 {
background-image: url(../images/logo.png);
background-repeat: no-repeat;
}

Christian

skodi · 14. Februar 2018

Die gute Nachricht:
Das System mit dem Hintergrundbild für die eine spezielle Unterseite funktioniert!

Ich habe über die "Element untersuchen" Funktion mal die Url eines Bildes von Wikipedia eingegeben - das würde dann angezeigt werden. Das System stimmt also.

Jetzt müssen wir nur noch herausfinden wo genau du diese diese mauer2.png abgespeichert hast.
Dann den entsprechenden Pfad eintragen und schon wird es funktionieren.

P.S.
Sagt man in der Schweiz echt Renovation?

Indigo66 · 15. Februar 2018

Zitat von skodi

Jetzt müssen wir nur noch herausfinden wo genau du diese diese mauer2.png abgespeichert hast.

Liegt es direkt im image-Verzeichnis com Root, dann ../images/mauer2.png

deGobbis · 15. Februar 2018

Bitte genau den Link schreiben, wo auch die Seitenklasse eingesetzt werden soll.

christine2 · 15. Februar 2018

Hallo,

Zitat von Indigo66

Liegt es direkt im image-Verzeichnis com Root, dann ../images/mauer2.png

liegt leider nicht so drinnen, sondern so:

und führt natürlich auch zu einem 404er.
Das logo Bild hast ja richtig drinnen.

Liebe Grüße
Christine

misel · 15. Februar 2018

Guten Abend,
Im Screenshot ist der Pfad, wo sich das Bild "Mauer2.png" befindet. Kann es auch daran liegen, dass das Bild nicht sehr gross ist?
@deGobbis https://mag-baugeschaeft.ch/renovation/maurerarbeiten
@skodi Ja in der Schweiz heisst es so.

chr-hl · 15. Februar 2018

Es könnte so einfach sein!!
.item-pagehintergrundbild1 {
background-image: url('../images/mauer2.PNG');
background-repeat: no-repeat;
}

Die Gross-Kleinschreibung ist hier das Geheimnis (Für Server ungleich Windoof ist png nun mal nicht PNG.

Christian