Hintergrundbild immer am Ende des Browsers

**adifl** · 26.09.2010, 19:21

Hallo zusammen

Ich versuche gerade ein Hintergrundbild an das ende des Browsers zu positionieren. Mit diesem Code geht es leider nicht...

background: url("bg.jpg" center bottom repeat-x

Das Bild ist zwar am Schluss der Webseite aber nicht am Schluss vom Browser wenn man einen etwas grösseren Bildschirm hat...

Gibt es da eine Lösung für das cantao framework?

viele dank..

**Andreas** · 26.09.2010, 19:54

lol Was ist denn das Ende eines Browsers? Oder der Schluß einer Webseite? Und was ist ein etwas größerer Bildschirm?

Dein Code ist falsch. Richtig wäre

Code:

selector {
  background: url(bg.jpg) repeat-x center bottom;
}

Wobei das allerdings keinen Sinn ergibt, horizontal wiederholen, horizontal zentrieren, vertikal unten. Sorry zwischen 'center bottom' und 'left bottom' ist doch ein Unterschied. Bei 'center bottom' in Verbindung mit repeat-x wird die linke Bildkante in der Mitte zentriert (nicht der Mittelpunkt des Bildes).

Eine Lösung wäre unabhängig von Contao, es geht nur um HTML und CSS. Zeig doch mal die Seite. Willst du das Bild am unteren Rand des Viewports haben? Schau dir die ganze Sache auch mal mit Firebug an.

Grüße

**adifl** · 27.09.2010, 07:47

die webseite ist diese: http://www.fussballtourist.li/cms/

ok, vielleicht war ich da ein wenig zu ungenau beim abtippen... sorry...

doch doch das ist das Gras das soll immer ganz unten sein... und danach soll keine farbe schwarz mehr kommen...

**Nikolas** · 27.09.2010, 09:11

Das Gras immer unten am Bildschirmrand? Und darüber nur schwarz als Hintergrundfarbe?

Dann solltest du mit

body
{
background:url("pfad_zu_deinem_bild") repeat-x left bottom;
}

Erfolg haben

Gruß
Nikolas

**adifl** · 27.09.2010, 17:28

das problem ist, dass der body nur so gross ist wie die webseite und nicht wie das browserfenster... somit wird es immer schwarz sein, wenn der bildschirm zu gross ist oder?

**planepix** · 27.09.2010, 20:27

Versuch mal für body zu ergänzen:

Code:

body{background:#000000 url("tl_files/greengrass/bg.jpg") bottom left fixed repeat-x;}

**Andreas** · 27.09.2010, 22:42

Wenn du im Firebug im HTML mit der Maus über den BODY gehst, siehst du, dass der Body nicht automatisch auf Höhe des Viewports ausgedehnt wird. Gib dem HTML-Element eine Höhe von 100%, dann geht's im Firefox. Überprüfe danach in den anderen Browsern.

Grüße

**adifl** · 02.10.2010, 12:12

ja das mit dem fixed hat funktioniert... das mit der höhe body 100% geht leider nicht mit divs...

vielen dank...

**Andreas** · 02.10.2010, 17:54

Nicht dem BODY-Element, dem HTML-Element.

Code:

html {
  height: 100%;
}
body {
  background: #000000 url(tl_files/greengrass/bg.jpg) repeat-x left bottom;
}

**adifl** · 07.10.2010, 19:02

ok, werde ich bei der nächsten webseite versuchen, im html-element 100%.. ;o)

vielen dank

**heiko** · 18.04.2011, 16:53

Habe leider das selbe Problem. Was bei einer statischen Seite mit einem Editor erstellt funktioniert, bekomme ich in Contao nicht hin.

Code:

html { height: 100%; }

Code:

body: { background: url(tl_files/images-1/body-bottom.jpg) repeat-x fixed bottom; }

Der untere Balken im body will einfach nicht.

Gruß
heiko

**Xamanoth** · 18.04.2011, 17:03

Zitat von heiko

Code:

body: { background: url(tl_files/images-1/body-bottom.jpg) repeat-x fixed bottom; }

Der untere Balken im body will einfach nicht.

Gruß
heiko

Ist der Doppelpunkt nach body auch in deinem Code? Evtl. liegts ja daran, weiß nicht ob das in CSS zulässig ist.

**heiko** · 18.04.2011, 17:08

Hallo Xamanoth,

nein, ich habe das nur vollständigerweise hier hinzugefügt. Unter Eigene Code habe ich:

Code:

background: url(tl_files/images-1/body-bottom.jpg) repeat-x fixed bottom;

In den Contao-Einstellungen vom body noch Hintergund eine Farbe.

Gruß
heiko

**Andreas** · 18.04.2011, 18:17

Wo hast du den Doppelpunkt hinter dem body denn her? Steht der so in der CSS-Datei? Wenn ja, dann ist das falsch.

Andreas

**heiko** · 18.04.2011, 18:27

Hallo Andreas,

ups, der steht so nicht drin. Habe ich hier falsch in [code] geschrieben. Habe ganz normal bei body in Eigene Code

Code:

background: url(tl_files/images-1/body-bottom.jpg) repeat-x fixed bottom;

hinzugefügt.

Gruß
heiko

**Andreas** · 18.04.2011, 18:36

Zeig am besten mal nen Link auf das Problem, sonst wird das hier wohl nix.

Andreas

**heiko** · 18.04.2011, 18:40

Ist allerdings erst seit heute im Aufbau. Bitte nicht wundern. http://contao.testloop.de/ Unten soll ebenfalls dieser blaue Balken wie oben erscheinen.

heiko

**Andreas** · 18.04.2011, 18:45

Da stimmt was mit dem Pfad nicht, das Bild existiert nicht.

**Andreas** · 18.04.2011, 18:49

Nimm auch lieber ein Content-Element für die Bilder.

HTML-Code:

<div id="logo"><img src="tl_files/images-1/rabe_logo.jpg" width="262" height="74" alt="Logo Rabe Engineering"></div>

IMG-Elemente schließt man so <img ...title="irgendwas" />
Mit nem Content-Element passiert sowas nicht.

**Andreas** · 18.04.2011, 18:53

Da dein blauer Balken oben nicht stehen bleibt, gehe ich davon aus, dass der blaue Balken unten auch nicht stehen bleiben soll. Dann bist du mit dieser Technik auf dem Holzweg, nimm dazu lieber eine fe_page.tpl Anpassung, wobei der Viewport immer bis unten hin ausgefüllt wird. Da gibt es irgendwo ne Anleitung, ist ganz leicht, vielleicht mal suchen nach fullheight.

***xchs*** · 18.04.2011, 19:04

Der Pfad zum Bild stimmt genau deshalb nicht, weil er nicht in Anführungszeichen steht.

Wenn Du in der Formatdefinition das Bild so referenzierst

Code:

background: url("tl_files/images-1/body-bottom.jpg") repeat-x fixed bottom;

dann klappt das auch mit kombinierten Stylesheets...

**Andreas** · 18.04.2011, 19:05

How to use the Sticky Footer HTML and CSS code
Dazu musst du eigentlich nur den Footer aus dem Wrapper herausnehmen und ganz ans Ende der Seite setzen. Dann das CSS noch an die Selektoren von Contao anpassen.

Andreas