Background images und Wrapper width

[hightime]

Hi allerseits,

sitze gerade am Design einer Seite und ich habe da ein kleines / blödes Problem… Hab mal schnell folgendes Beispiel zusammengebastelt:

Hatte vor einfach den Body-Hintergrund mit repeat-x zu machen und dann anschließend im Wrapper das Logo als Hintergrund zu positionieren. Tja, das Problem ist aber, dass ein Teil des Logos über den Wrapper rechts hinausragen soll und somit bin ich recht ratlos wie das am besten gemacht wird?


Danke im Voraus und mit freundlichen Grüßen,

Hightime

 

[Tronjer]

Dann sollte das background-image nicht auf dem Body liegen.

 

[hightime]

Tronjer, bin mir nicht ganz sicher das verstanden zu haben… Wie gesagt, erst dachte ich:

WRAPPER ------- background img mit logo -------
BODY ------- background img repeat-x -------

Das klappt ja aber wie gesagt nicht weil Logo über den Wrapper hinaus ragt.
Möglich wäre ja dann auch body { background-color: grün; background-img: logo; } aber dann wüsste ich nicht so recht wie ich den header-background noch weiss bekomme?

 

[Tronjer]

Du willst doch dein Logo nicht über den Body hinausragen lassen, oder?

 

[hightime]

Nein, nur ein Stück rechts über den Wrapper.

 

[Tronjer]

Bau doch zwei Wrapper und lass den einen über den anderen hinausragen.

 

[hightime]

Ja klar…hört sich logisch an! Manchmal denk ich etwas zu kompliziert…

So also mein CSS hat jetzt folgenden Code:

#page-wrap {	width: 960px;
	min-height: 700px; 
	margin: auto auto; 
	position:relative;
	background-color: #494949;
	z-index: 2;
}


#bg-wrap {
	width: 1200px;
	min-height: 700px; 
	position:relative;
	background-image:url('logo-bg.png');
	background-repeat: no-repeat;
	background-position:800px 200px;
	z-index: 1;
}

Aber bei wrapper übereinander zu legen, hab ich nicht noch nicht so hinbekommen. "Z-Index" in Kombination mit "position: absolute;" und "top: 0px;" hat funktioniert, aber dann waren die wrapper nicht mehr mittig ausgerichtet. Eine Idee?

 

[Tronjer]

Mach es doch einfach so:

<div id="unten">
  <div id="oben"></div>
</div>

#unten erhält ein margin:auto und eine width in Pixeln.

#oben erhält margin-left und margin-top, sowie width in Pixeln.

Ersatzweise kannst du für #oben auch position:relative in Kombi mit left und top verwenden.

Anschließend schiebst du das Element bis es passt.

 

[hightime]

Hat geklappt, vielen Dank!