Seitencontent ausrichten an Hintergrundbild

  • Joomla Version
    4.2.9
    PHP Version
    PHP 8.2.x
    Hoster
    Domainfactory
    Link (URL) zur Seite mit dem Problem
    http://www.francesco.der-fall-tim-k.de/

    Hallo Community,

    ich hoffe Ihr könnt mir weiterhelfen. Das Problem ist offensichtlich: da ist dieser schöne Hintergrund mit dem Ornament außen herum.

    Nun hätte ich gerne, dass der Content innerhalb des Ornaments angezeigt wird und weiß leider nicht von welcher Seite ich das angehen soll. Ich hatte im CSS des Cassiopeia Template (user.css) schon die margin verändert, was nur dazu führt dass ALLES einen Rand bekommt, also auch der Hintergrund abgeschnitten wird. Dieser soll jedoch weiterhin die ganze Seite ausfüllen, jedoch nur der Content, also Beiträge, Module usw. soll nach innen rücken. Oder geht das gar nicht und ich muss das Hintergrundbild bearbeiten?

    Vielen Dank für Eure Aufmerksamkeit!

    Gruß

    mrm

  • francesco.der-fall-tim-k.de

    Dein Bild ist riesengroß, fast 10 MB groß!, die Ladezeit der Seite ist dementsprechend schlecht...

    Es wird nicht möglich sein (oder mit nur mit viel CSS) immer die Ornamente als Rahmen des Inhalts anzuzeigen. In großen Displays wird es von der Breite her passen, und von der Höhe nur wenn genügend Inhalt da ist. In kleineren Displays wird das Bild abgeschnitten oder verzerrt...

  • Ja, damit wirst du wohl nicht glücklich werden.

    Wenn du es unbedingt testen willst dann eventuell z.B. damit am Ende der user.css:

    Code
    .container-header,
    .site-grid {
        padding: 7em;
        padding-bottom: 2.5em;
        padding-top: 0.5em;
    }
    
    body.site {
        background-attachment:  inherit;
    }
  • Vielen Dank für Euren Input!

    Ja das Bild ist natürlich zu groß - muss verkleinert werden. Ich arbeite dran und werde den Code mal ausprobieren. Alternativ bleibt dann nur ein anderes Hintergrundbild.

    Gruß

    mrm

  • Wenn der Hintergrund bzw. das Hintergrundbild nicht mitscollen soll,

    einfach die letzten drei Zeilen vom Code in #4 weglassen.

    Weitere Änderungen natürlich auch noch möglich wie z.B. zusätzliche CSS-Deklarationen:

    background-color: rgba(255, 255, 255, 0.8);

  • Hallo,

    Ich möchte Euch allen nochmal danken für Eure Hilfe. Die Site ist jetzt erstmal so wie ich Sie mir vorgestellt habe und den Hintergrund habe ich auch optimiert. Das Bild hat jetzt nur noch ca. 650kb.

    Gruß

    mrm