Hintergrundbild volle Breite im Inhaltbereich (Cassiopeia-Childtemplate)

floh19

Guten Abend zusammen,

ich habe ein Childtemplate vom cassiopeia erstellt und möchte das vom Layout her anpassen.

Ein Banner oben im header habe ich eingefügt.

Danach kommt etwas Text, und zwischendurch in diesem Contentbereich sollen weitere Bilder statisch erscheinen und der Text dann beim Scrollen drüberlaufen.

Leider bekomme ich das Bild schon mal nicht in der vollen Bildschirmbreite (sowie das Bannerbild im Headerbereich) hin, geschweige denn den Scrolleffekt.

Wäre es eine Möglichkeit, in der index.php und xml-Datei eine neue Modulposition zu definieren und sie genauso zu stylen wie das Banner-Modul?

Oder gibt es da einfachere Lösungen?

LG

flo

Elwood

Zitat von floh19

Oder gibt es da einfachere Lösungen?

Bei Designfragen immer einen Link angeben.

chr-hl

CSS wird die Lösung sein.

Ohne Link jedoch kein Wink.

Christian

floh19

Guten Morgen und sorry,

hier der Link:

Startseite

Das Bild Nächstenliebe soll diesen Effekt haben.

chr-hl

Hallo,

derzeit ist das Bild über ein Modul eingebunden.

Dort funktionieren m.E. die gewünschten Features nicht.

Mit CSS kann man Hintergrundbilder inkl. ihrer Positionierung bereitstellen.

Hier ein Link für weitere Erläuterungen: https://www.drweb.de/background-image/

Christian

floh19

Hallo chr-hl,

danke für den Link, da stehen interessante Informationen.

Über ein Modul bekomme ich das allerdings nicht hin.

Wie könnte ich das dann machen?

html-Code in die index.php schreiben?

Funktioniert das so?

Sieger66

Nein.

Eventuell nützlich als Arbeitsgrundlage am ende der user.css:

Code

/* STARTSEITE - Nächstenliebe */
body.itemid-101 .site-grid {
  background-attachment: fixed;
  opacity: 0.7;
  background-image: url('/media/templates/site/cassiopeia_diakonievereinneureut/images/startseite-naechstenliebe.jpg');
  background-size: 100vw;
}

und dort den kompletten Abschnitt

.naechstenliebe

entfernen.

und das Modul auf der Startseite natürlich auch entfernen.

Und obiges CSS natürlich nach belieben verändern oder ergänzen.

floh19

erst mal danke Sieger66, ich probiere etwas aus...

bitte noch nicht schließen, habe bestimmt noch Fragen

Sieger66

Ja, Susanne wir warten dann mal ab.

Übrigens, danken kann man hier im Forum auch einfach per klick auf den Button "Reagieren" am unteren rechten Ende jeden Postings den man nicht selbst erstellt hat.

floh19

okay, danke für den Hinweis (ich werde daran denken) und die Tipps.

So, ich habe das jetzt hinbekommen, allerdings mit einem Modul, denn ich wollte es so wie es dieses Template darstellt haben (das Bild mit der Feuerstelle):

Contao theme store demo

Jetzt haben sich allerdings die darauffolgenden Module (Begegnung und Footer) "verändert" und greifen das css nicht mehr und ich weiß nicht warum.

Habt ihr noch einen Tipp für mich?

also, die nachfolgenden beiden Module sollten über die komplette Breite gehen.

Und natürlich greift das css noch, habe mich da wohl falsch ausgedrückt,

Ich habe es schon mit clear probiert, jedoch ohne Erfolg.

Ich möchte mal noch posten, was ich in der index.php eingegeben habe, vielleicht habe ich ja da etwas falsch gemacht:

<?php if ($this->countModules('naechstenliebe', true)) : ?>

<jdoc:include type="modules" name="naechstenliebe" style="none" />

</div>

<?php endif; ?>

<?php if ($this->countModules('begegnung', true)) : ?>

<jdoc:include type="modules" name="begegnung" style="none" />

</div>

<?php endif; ?>

<?php if ($this->countModules('footer', true)) : ?>

<jdoc:include type="modules" name="footer" style="none" />

</div>

</footer>

<?php endif; ?>

Hat jemand eine Idee?

Sieger66

Warum schliesst du deine offenen div oben in #12 nicht ?

Wenn man zwei div öffnet sollte man ja auch zwei schließen.

Verwende doch zukünftig z.B.:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fjoomla4.diakonieverein-neureut.de%2F

Zeigt dir am Ende die "Error" an.

Die Info-Hinweise dort kann man übrigens per Massage Filtering auch ausblenden.

floh19

das war's, ist mir nicht aufgefallen, merci beaucoup,

Jetzt gefällt's mir sehr gut und mein Problem ist gelöst.