Templates & Sprachen » Hintergrundbild als Ganzes

25.06.2025 17:03

WarriorCats-VierneueClans
#1 Hintergrundbild als Ganzes

Hallo,
wir haben bei unserem Forum das Problem, dass das Hintergrundbild mehrfach erscheint, wenn wir die Datei ins Template einfügen (v6).

Gibt es eine Möglichkeit oder eine Einstellung dies zu verhindern?

Bildanh�nge

Screenshot_1 fg.png

download

Antworten

Beitrag melden

#2

25.06.2025 17:56

Mike48
#2 RE: Hintergrundbild als Ganzes

Mike48

Administration → Layout → Farben & Einstellungen → css/scss → CSS / SCSS Addon

1
2
3
4
5
 
/* begin -  Hintergrundgrafik fixieren */
body {
  background-attachment: fixed;  
}  
/* end-  Hintergrundgrafik fixieren */
 

www.friends-of-xobor.de (621181 - Template kann wechsel bei Plungin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#3

25.06.2025 19:31

Mike48
#3 RE: Hintergrundbild als Ganzes

Mike48

Das functioniert leider nicht auf Mobil.
Ich habe eine Variante für Desktop und Mobil gefunden.

1. Die Hindergrundgrafik löschen unter
Administartion → Layout → Farben & Einstellungen → Grafiken → Hintergrundmuster URL einer Grafik löschen.

2. Hintergrundgrafik neu eingeben unter
Administartion → Layout → Farben & Einstellungen → css/scss → CSS / SCSS Addon

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* begin -  Hintergrundgrafik fixieren Desktop und Mobil */
html::before {
    content: ' ';
    display: block;
    //hier den Pfad zu deinem Hintergrundbild einsetzen
    background-image: url('https://files.homepagemodules.de/b612094/a_596_78a53019.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; // Das hier ist sehr wichtig!
}
/* end-  Hintergrundgrafik fixieren */
 

www.friends-of-xobor.de (621181 - Template kann wechsel bei Plungin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#4

26.06.2025 00:30

WarriorCats-VierneueClans
#4 RE: Hintergrundbild als Ganzes

WarriorCats-VierneueClans

Danke vielmals!

Antworten

Beitrag melden

#5

26.06.2025 10:09

Mike48
#5 RE: Hintergrundbild als Ganzes

Mike48

Hallo @WarriorCats-VierneueClans,
den Code aus meinem Beitrag #3 hast du aber noch nicht umgesetzt.
Auf dem Smartphone scrollt das HG-Bild noch mit.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Plungin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#6

26.06.2025 11:12 (zuletzt bearbeitet: 26.06.2025 11:13)

Mike48
#6 RE: Hintergrundbild als Ganzes

Mike48

Zitat von Mike48 im Beitrag #3
1. Die Hindergrundgrafik löschen unter
Administartion → Layout → Farben & Einstellungen → Grafiken → Hintergrundmuster URL einer Grafik löschen.

Kleine Korrektur: Das Hintergrundmuster nicht löschen.
Bei mir kommt dann immer erst ein roter Hintergrund bevor das Bild kommt.

www.friends-of-xobor.de (621181 - Template kann wechsel bei Plungin Tests)
www.seniorenclub-sel-koeln.de (578865 - V6 Template)

Antworten

Beitrag melden

#7

26.06.2025 13:54

WarriorCats-VierneueClans
#7 RE: Hintergrundbild als Ganzes

WarriorCats-VierneueClans

@Mike48
Wir probieren gerade mit dem v6 auf unserem Testforum herrum, damit wir eines haben, sollte unser aktuelles Template nicht mehr funktionieren. Auf unserem Hauptforum werden wir es eventuell in Zukunft ebenfalls umstellen.
Vielen Dank!

Antworten

Beitrag melden

#8

26.06.2025 14:14 (zuletzt bearbeitet: 26.06.2025 14:16)

Mike48
#8 RE: Hintergrundbild als Ganzes

Mike48

Kleine Fehler im Code. Im css sind Kommentare mit /* und */ statt mit //
Die Kommentare werden vom Parser scheinbar entfernt, aber sicherheitshalber ändern.

Also:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
/* begin -  Hintergrundgrafik fixieren */
html::before {
    content: ' ';
    display: block;
    /* hier den Pfad zu deinem Hintergrundbild einsetzen */
    background-image: url('https://files.homepagemodules.de/b612094/a_596_78a53019.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh; width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; /* Das hier ist sehr wichtig! */
}
/* end-  Hintergrundgrafik fixieren */
 
 