Hintergrund fest und 100% Ausnutzung der Fläche

[wunderkid]

Hallo liebe Contao Community,

ich sitze seit ein paar Tagen immer mal wieder an dem gleichen Problem. Es macht mich schon ganz irre.

Ich möchte ein Hintergrundbild auf der Webseite haben, dass fest ist, so dass der eigentliche Inhalt darüber fliesst. Auch sollte sich die Bildgröße der Webseite zu 100 % an den Monitor anpassen.

Hier mein vorgehen:

#wrapper {
background-image:url("files/Layout/Hintergrund/hintergrund.png");
background-repeat:no-repeat;
background-attachment:fixed;
}

Damit bekomme ich es hin, dass der Hintergrund fest. Allerdings ist die Bildgröße starr. Ich habe schon im wrapper die Weite und die Höhe auf 100% gesetzt. Aber so ging es leider auch nicht.
Hat jemand einen Tip ? Vielen Dank im Vorfeld.

[valentin_]

definier das bild besser bei html oder body. hiermit wird das bild ueber die ganze flaeche angezeigt:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Gesendet von meinem GT-I9505 mit Tapatalk

[wunderkid]

Vielen lieben Dank. Das hat wirklich sehr gut geholfen.

[andreasisaak]

Es muss nicht der body sein, es geht auch mit jedem anderen div. Siehe z.B. auch die Contao-Konferenz Seite:

http://contao-konferenz.de/

[valentin_]

Nein "muss" es nicht. Bei contao-konferenz.de ist es allerdings kein "Full-Background-Image" sondern füllt nur einen Container aus.

Es würde zwar funktionieren, aber wenn der Container eine Breite/Höhe hat mit overflow:hidden (was bei #wrapper des Öfteren der Fall sein könnte) ist das Bild abgeschnitten. Deshalb ist es "besser" ein ganzflächiges Bild, im body/html zu definieren, da diese wahrscheinlich 100% Breite haben.

[Robby1]

....hätte ich das bloss vor 3 Tagen schon gelesen. Ich bin 3 Tage lang verzweifelt durch die Gegend gelaufen mit dem Thema.

Danke Leute!

Gruß! Robby