✔ Hintergrund passt sich nicht der Seite an

[ReneHetzel]

Schönen Guten Morgen zusammen,

ich beschäftige mich noch nicht so lange mit css und div elementen daher habe ich glaube ich ein recht simples problem. Ich hoffe Sie können mir dabei helfen.


Es geht um folgendes (ich hoffe ich drücke mich richtig aus ):

Ich habe einen Hintergrund mit dem Attribut Position: Buttom. Der die komplette Seite füllen soll.

Der Hintergrund wird jedoch immer nur so groß wie auch die anzeige am Display ist dargestellt. Sobald ich scrollen muss verschwindet dieser bzw wird hört auf und es wird weis.

Wenn ich mit dem Attribut height spiele: 100% oder auto - habe ich dann das problem, dass wenn der Seite inhalt kleiner als das Display ist weis dargestellt wird.

Sprich der Hauptcontainer (site) passt sich nicht dem Seiteninhalt an.

Hier mein CSS Code:

html, body
{
       height: 100%;
}

body
{
	margin:	0; 
	padding:0; 
		
	width:	100%; 

	color:	#000000;
}

.site
{
	text-align: center;
	top: 		0px;
	left: 		0px;
	width: 		100%;
	height:		100%;
	overflow: 	visible;
	visibility: visible;
	display: 	block;	
	
	background-position:	bottom;
	background-repeat:		repeat-x;
	background-image:		url(../images/bg_siteBottom.jpg);
	background-color:		#a4a4a4;
	font-family:	arial;
	font-size:		9px;
	
	color:	#000000;
}

Vielen Dank im Voraus.

 

[Maik]

Hi,

standardkonforme Browser interpretieren die height:100%-Deklaration für .site als feste Höhe.

Lösung: Für den Block eine Mindesthöhe einrichten.

.site
{
        text-align: center;
        width:                 100%;
        min-height:       100%; /* Mindesthöhe in standardkonformen Browsern */
        height:                auto !important; /* autom. Höhe mit !important-Regel für standardkonforme Browser, damit sie die nachfolgende height-Deklaration ignorieren */
        height:                100%; /* Mindesthöhe in IE */
        overflow:         visible;
        visibility: visible;
        display:         block;

        background-position:        bottom;
        background-repeat:                repeat-x;
        background-image:                url(../images/bg_siteBottom.jpg);
        background-color:                #a4a4a4;
        font-family:        arial;
        font-size:                9px;

        color:        #000000;
}

mfg Maik

 

[ReneHetzel]

Klasse hat funktioniert.

Ich bedanke mich für die super beschreibung. Sowas bekommt man ja selten.