| Home | Hilfe | Add-Ons | Templates | Spenden | Impressum | Datenschutz |

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

Pages: 1

#1 09.04.2023 11:16:04

musenfreund
Member

Hintergrund-Grafik (Vollflächig, statisch)

Hallo, ich nutze das Frontend-Template elafeknes und suche eine Möglichkeit für jede Seite eine statische vollflächige Hintegrundgrafik einzubinden. Bisher habe ich keine Einstellmöglichkeit dafür gefunden. Deswegen zweckentfremde ich momentan das Modul Background Slider dafür, aber lässt sich mein Anliegen nicht auch ohne diesen Umweg umsetzen?

Vielen Dank, musenfreund

Offline

#2 09.04.2023 14:44:29

florian
Administrator

Re: Hintergrund-Grafik (Vollflächig, statisch)

Du könntest in der /templates/elafeknes/index.php vor </head> einfügen:

<style>
  body {
    background-image:url(<?=WB_URL?>/media/hintergrund_<?=PAGE_ID?>.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-attachment:fixed;
  }
  </style>

und dann im Medienverzeichnis für jede Seite das gewünschte Hintergrundbild ablegen.
Also Seite mit der ID 2 => hintergrund_2.jpg usw.

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

#3 09.04.2023 19:26:22

musenfreund
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Ja, das funktioniert schon mal super! smile Danke.

Bei dieser Methode ergibt sich (mit einer 16Mbit-Leitung / aktuell realen ca. 11Mbit) beim ersten Aufruf der Seite ein Abrolleffekt, also einen sichtbaren Aufbauvorgang der Grafiken (ca 300kB/Grafik).
Kann man die Grafiken aller (5) Seiten vorladen, um diesen Effekt nur einmal sehen zu müssen oder idealerweise ganz zu vermeiden?

Beim Weg über Modul Background Slider gab es diesen Effekt nicht.

Offline

#4 10.04.2023 07:51:42

florian
Administrator

Re: Hintergrund-Grafik (Vollflächig, statisch)

Du könntest gemäß dieser Anleitung eine Ladeanimation einbauen.

D.h. in der /templates/elefaknes/index.php direkt nach <body> einfügen:

<div id="loader">
</div>

Und am Ende, vor </script>:

$(window).load(function(){
	$("#loader").fadeOut("slow");
});

in der /templates/elefaknes/styles.css

#loader{
	z-index:999999;
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(loader.gif) 50% 50% no-repeat #cccccc; 
}

Die loader.gif nach /templates/elefaknes hochladen.

Eventuell auch noch mit tinyjpg die Größe der Hintergrundbilder reduzieren/optimieren.


--------------------------------------------------
<semi-offtopic>
Mir ist aufgefallen, dass im elefaknes-Template noch Reste vom Lesefaken-Template sind, die da gar nicht mehr benötigt werden. Gelöscht werden kann:
im <head>

<script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/jquery.backstretch.min.js"></script>

und

 <?php
$headerbild_id = "0";
$takeit=false;

if (file_exists(WB_PATH . '/media/headerbilder/header_0.jpg')) {
        $headerbild_id = 0;
        $takeit = true;
    }

if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
        $headerbild_id = PAGE_ID;
        $takeit = true;
    }
} else {
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PARENT . '.jpg')) {
        $headerbild_id = PARENT;
        $takeit = true;
    }
    if (file_exists(WB_PATH . '/media/headerbilder/header_' . PAGE_ID . '.jpg')) {
        $headerbild_id = PAGE_ID;
        $takeit = true;
    }
}

    ?>

und ganz am Ende

<?php if ($takeit==true) { ?>
<script>
	    $(".schmuckbild").backstretch(["<?php echo WB_URL . '/media/headerbilder/header_' . $headerbild_id . '.jpg';?>"]);
</script>
<?php } ?>

</semi-offtopic>

Last edited by florian (10.04.2023 07:53:56)

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

#5 10.04.2023 07:53:59

berny
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Also, da hat es was anderes
Bild ist Bild, das hat nichts mit dem css style zu tun.
300kb bei 11mbit müsste sofort da sein.

Florian war wieder mal schneller, und das am Ostermontag .

Last edited by berny (10.04.2023 07:55:56)

Offline

#6 10.04.2023 12:42:17

musenfreund
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Vielen Dank für die Idee mit der Loaderanzeige - allerdings ist das nicht das was ich suche. Mir ging es darum, diese seltsame Ladeverzögerung wegzubekommen.
Wie berny denke ich auch, dass es eigentlich nicht an den Grafiken bzw. ihrer Größe liegen kann. Zumal sie ja beim Umweg über Background Slider (mit den identischen Grafiken) auch nicht da war.

Danke auch für die Hinweise zum Template, ich hab die entsprechenden Bereiche auskommmentiert. Gefühlt luden die Grafiken danach minimal schneller, aber das kann auch Wunschdenken sein.  wink

Offline

#7 07.08.2025 20:50:06

viterbese64
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Hallo ,

ich finde nicht die Lösung zum einbinden eines Hintergrundbildes aus einer CSS Datei im template Ordner.
das Bild befindet sich im media Ordner ..
Habe es mit dem absoluten Pfad mit
background-image:url("localhost/mein_pfad/media/ButtonKlein1.jpg")
versucht, aber der Hintergrund wird nicht verändert .
Muss ich in WBCE relative Pfade verwenden?
In der CSS kann ich nicht WB_URL benutzen, das würde es ja vereinfachen.

Last edited by viterbese64 (07.08.2025 20:50:55)

Offline

#8 07.08.2025 21:09:57

florian
Administrator

Re: Hintergrund-Grafik (Vollflächig, statisch)

Relative Pfade sind kein Muss. Im Falle einer lokale Testinstanz aber vielleicht einfacher. Bei absoluter Pfadangabe muss diese genauso lauten wie die URL im Browser, also http://localhost/...
Denkbar ist sonst noch, dass es schlicht ein Browsercacheproblem ist.

Sorgen sind wie Nudeln: man macht sich meist zu viele.

Offline

Liked by:

viterbese64

#9 07.08.2025 21:38:23

viterbese64
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

florian wrote:

Relative Pfade sind kein Muss. Im Falle einer lokale Testinstanz aber vielleicht einfacher. Bei absoluter Pfadangabe muss diese genauso lauten wie die URL im Browser, also http://localhost/...
Denkbar ist sonst noch, dass es schlicht ein Browsercacheproblem ist.

Vielen Dank, da fehlte nur noch das http:// :-)

Offline

#10 08.08.2025 09:49:25

byteworker
Member

Re: Hintergrund-Grafik (Vollflächig, statisch)

Da gab es mal ein Modul für, das genau den Effekt gemacht hat:

https://dev4me.com/modules-snippets/ope … undslider/

https://dev4me.com/modules-snippets/ope … ider/demo/

Praktische Anwendung: https://www.korloyeurope.eu/pag

Last edited by byteworker (08.08.2025 10:40:42)

= Templates für WBCE

Offline

Liked by:

florian

Pages: 1

Board footer

up