Inhaltsbereich soll mitwachsen

[Frischling-Webdesign]

Ein freundiches Hallo in die Runde,

ich wünsche allen noch einen schönen letzten Ostertag.

Ich bin Anfänger in HTML & CSS, bringe mir das alles selber bei durch lesen von Büchern, Videostraining und mit Hilfe von Google.

Ich arbeite mich gerade in Contao ein und habe es lokal auf meinem Rechner.

Ich habe ein Design mit Photoshop entworfen und möchte nun diese Seite mit Contao erstellen.

Bis jetzt bin ich ganz gut voran gekommen, mein Header steht, die Navigation auch.

Folgendes Verständnis fehlt mir noch:

Wie muss ich vorgehen wenn der Contentbereich ein Hintergrundbild bekommt der mit dem Text dann mitwächst.

Habe viel gegoogelt aber leider das Prinzip noch nicht verstanden...

Es wäre super wenn mir jemand erklären könnte welche Schritte notwendig sind um das hin zubekommen.

So soll die Seite aussehen:


Mein CSS-Code:

body {
  background-color:#ee8201;
}
#wrapper {
  width:923px;
  background-color:#00fbff;
}
#header {
  width:923px;
  height:390px;
  margin-top:5px;
  background-image:url("#");
  background-position:center center;
  background-repeat:no-repeat;
}
#container {
  width:923px;
  bottom:0;
  right:0;
}
#main {
  width:879px;
  margin-top:0;
  margin-left:17px;
}
#main h1 {
  padding-left:20px;
  font-size:24px;
  color:#073891;
}
#main p {
  padding-right:20px;
  padding-left:20px;
  font-size:16px;
}
#main .image_container {
  padding-right:20px;
}

Code in Code-Fenster eingebunden - reitzi MOD

Herzlichen Dank für Eure Hilfe

 

[jimny1999]

Mit CSS3 ist das möglich. Ich habe hier eine gute Erklärung mit Beispielen gefunden: http://www.intensivstation.ch/css3/background-size/

Interessant dürfte für Dich eine der Alternativen von background-size: cover; bzw. background-size: contain; sein.

 

[afr0kalypse]

korrekterweise wirst du ein kachelbares hintergrundbild benötigen und dieses dann mit der css-eigenschaft background-repeat: repeat-y; nach unten hin wachsen lassen.
Beispiel: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-repeaty