# Div Seitengröße Background



## stahl (18. Januar 2011)

Ich bastel gerade an meiner Seite und möchte. 

3 Divs nebeneinander. In dem Div in der mitte möchte ich andere Bilder darüber Positionieren (daher Festes Bild mit fester Größe).

Die Divs rechts und links sollen von der Kante des Mittel divs* so breit sein wie der Rest des Bildschirmes*. (Die 3 Divs ergeben danach ein Hindergrundbild, In der mitte ein festes, und aussen werden die Bilder per repeat aufgefüllt) sein.

Ist das nur mit Css möglich und wenn ja welche Größe muss ich den rechten und linken Div geben das diese den Bildschirm füllen.

danke schon mal

Micha


----------



## dreifragezeichen (22. Januar 2011)

stahl hat gesagt.:


> Die Divs rechts und links sollen von der Kante des Mittel divs* so breit sein wie der Rest des Bildschirmes*. (Die 3 Divs ergeben danach ein Hindergrundbild, In der mitte ein festes, und aussen werden die Bilder per repeat aufgefüllt) sein.
> 
> Ist das nur mit Css möglich und wenn ja welche Größe muss ich den rechten und linken Div geben das diese den Bildschirm füllen.


*Mission Impossible* ;-)


----------



## franz007 (26. Januar 2011)

dreifragezeichen hat gesagt.:


> *Mission Impossible* ;-)


 
Um bei den Filmtiteln zu bleiben:
Never say never.


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<style type="text/css">
			body{
				overflow-x: hidden;
			}
			#links, #mitte, #rechts{
				top: 0px;
				position: absolute;
				height: 100%;
			}
			
			#mitte{
				background: red;
				width: 400px;
				margin-left: -200px;
				left: 50%;
				
			}
			#links{
				right: 50%;
				margin-right: 200px;
				background: url(http://www.google.at/images/logos/ps_logo2.png);
				width: 50%;
				background-repeat: repeat-y;
				background-position: right;
			}
			#rechts{
				left: 50%;
				margin-left: 200px;
				width: 50%;
				background: url(http://www.google.at/images/logos/ps_logo2.png);
				background-position: left;
				background-repeat: repeat-y;
			}
		</style>
	</head>
	<body>
		<div id="links">
		links
		</div>
		<div id="mitte">
			mitte
		</div>
		<div id="rechts">
		rechts
		</div>
	</body>
</html>
```

wobei #links und #rechts nicht nur bis zum "Rand" gehen sonder darüber hinaus (aber das ist egal).

Die einfachere, schönere und warscheinlich auch auf allen Browsern funktionierende, Lösung wäre einfach nur die Mitte als div zu machen. 
Wenn diese Zentriert positioniert wird und angenommen 200px breit ist gibst du dem Body ein background mit repeat-y und background-position: center;
Dann gestaltest du deinen Hintergrund so dass er in der mitte einfach 200px weiß (oder was auch immer) ist und links und rechts entsprechend das gewünschte Bild.

Gruß


----------



## dreifragezeichen (26. Januar 2011)

@franz007: Dein Code erfüllt aber nicht diese (fettmarkierte) Vorgabe:



stahl hat gesagt.:


> Die Divs rechts und links sollen von der Kante des Mittel divs* so breit sein wie der Rest des Bildschirmes*.



Insbesondere interessant, wenn alle drei "Bildsequenzen" nahtlos aneinanderpassen und den horizontalen Viewport vollständig ausfüllen, ihn aber nicht überschreiten sollen, wie es mit deinem Code  offensichtlich am linken Element zu erkennen ist, dessen Inhalt ("links") aus dem Sichtbereich verschwunden ist - eine Konsequenz deiner jeweiligen width- u. margin-Regeln.



franz007 hat gesagt.:


> wobei #links und #rechts nicht nur bis zum "Rand" gehen sonder darüber hinaus (aber das ist egal).


Wie kommst du zu der Schlußfolgerung, dies sei egal? Wegen deiner gesetzten *overflow-x:hidden*-Regel, die dies unterschlägt?

Was, wenn der horizontale Scrollbalken im Browser nicht unterdrückt werden soll, damit der Seitenbesucher ihn bei kleinerem Anzeigebereich zur Verfügung hat und ihn frei nutzen kann?

Es bleibt somit bei meiner nicht unbegründeten Aussage - unbefriedigende Tricks bzw. Schummeleien wie dein Vorschlag außen vor gelassen.


----------

