DocMcSky: Hintergrundgrafik komplette Fensterbreite auch bei scrollen

SELF-Forum

Hintergrundgrafik komplette Fensterbreite auch bei scrollen

DocMcSky
– Informationen zu den Bewertungsregeln

Hallo Leute,

ich suche gerade nach einer Möglichkeit eine Hintergrundgrafik oder auch nur Farbe ganzflächig über die Browserbreite zu verteilen UND das diese immer ganzflächig bleibt, auch wenn das Fenster so klein sein sollte, das der sonstige Inhalt darin horizontal gescrollt werden muss (rechts/links oder links/rechts).

Zunächst folgende Möglichkeit, es gibt sicher viele, aber das ist die einfachste die mir auch gerade einfiel:

  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head>  
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<title>Div-Test</title>  
  
<style type="text/css">  
#outer {  
	background-color: #aaa;  
	height: 30px;  
	text-align: center;  
}  
#main {  
	position: relative;  
	top: -5px;  
	width: 1200px;  
	margin: auto auto;  
	border: 1px solid;  
}  
</style>  
</head>  
  
<body style="margin: 0;">  
  
<div id="outer">  
	Logobild  
</div>  
<div id="main">  
	Hier steht was...  
</div>  
  
</body>  
  
</html>

Habe einfach mal diese Miniseite komplett gepostet, so sollte es einfach sein sie zu testen. :)
Die Seite jetzt erzeugt einen grauen Balken ganz oben, der soll eben IMMER komplett den Browser von links nach rechts ausfüllen.
In der Mitte zentriert und etwas überlappend ist das DIV, in dem später der gesamte Inhalt der Seite kommt. Dieses soll 1200px breit sein und mittig stehen.

So, alles funzt. ABER:
Hat jetzt jemand sein Browserfenster kleiner als die 1200px Inhaltsbreite, so erscheint logischerweise unten am Browserfenster der Scrollbalken. Schön und gut, er kann jetzt den Inhalt scrollen.
Aber der graue Balken oben wird eingekürzt. :(
Scrollt man den Inhalt, so wird der graue Hintergrund nicht nachgezogen, er bleibt so lang, wie das Fenster gerade breit ist und fehlt dann halt im gescrollten Bereich, das sieht dann irgendwie kaputt aus.

Kann man das umgehen? Wenn ja, wie?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hintergrundgrafik komplette Fensterbreite auch bei scrollen

    qx
    – Informationen zu den Bewertungsregeln

    Hallo DocMcSky,

    html {  
    background: linear-gradient(to top, #aaa 0px, #aaa 30px);  
    background-repeat: repeat-x;  
}

    da hier wäre eine Möglichkeit.

    gruss qx

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Hintergrundgrafik komplette Fensterbreite auch bei scrollen

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@qx:

      nuqneH

      background: linear-gradient(to top, #aaa 0px, #aaa 30px);

      Die Version mit WebKit-Präfix würde ich aber doch noch mit anbieten:

      html {  
    background: -webkit-linear-gradient(bottom, #aaa 0px, #aaa 30px);  
    background: linear-gradient(to top, #aaa 0px, #aaa 30px);  
    background-repeat: repeat-x;  
}

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln