HTML/CSS Hintergrund "festhalten"?

Hey,

Ich bin gerade dabei ein Forum zu programmieren, und nehme mir ein Vorbild an http://forum.diesesforum.de/index.php Man muss sich glaube registrieren damit man das gut sehen kann.

Aber ich wollte mal fragen, wie ich es schaffe, das dieser Graue Hintergrund beim Scrollen nicht mitkommt sondern da bleibt, also das der Header und der Boty und Footer sozusagen dadrüber fliegen.

Danke im Vorraus

Answer 1

[ChrisCat1, UserMod Light]

body{
  background-image: url('bg.jpg'); /* Hintergrund Bild setzen */
  background-attachment: fixed; /* Hintergrund Bild fixieren, damit es sich nicht mitbewegt */
  background-position: center top; /* Hintergrund Bild ausrichten */
}

Answer 2

[medmonk]

Es gibt wie so oft mehrere Möglichkeiten und letztendlich von der verwendeten Hintergrundgrafik abhängig ist, welcher Weg der sinnvollste ist. Kann die Hintergrafik gekachelt werden oder nicht?

CSS:

body {
 /* kurze schreibweise (shorthand) */
 background: #111 url('path/to/bg-image.jpg') center fixed;
 background-size: cover;

 /* lange schreibweise */
 background-color: #111; /* fallback */
 background-image: url('path/to/bg-image.jpg');
 background-position: center;
 background-attachment: fixed;
 background-size: cover;

Wenn die Grafik gekachelt (wiederholt) werden kann:

body {
 /* shorthand */
 background: #111 url('path/to/bg-patter.png') top left repeat fixed;
}

LG medmonk

Woher ich das weiß: Berufserfahrung