Dumme CSS Frage...

P3rform3r · 25. Januar 2014

Hey,

Ganz kurze (dumme) Frage:

Ich habe ein 1920x190 großes Headerbild. Das habe ich mit folgenden Werten eingefügt:

PHP

#header {
    background: url(images/header-background.png);
margin: 0;
padding: 0;
width:1920px;
height:190px;
position:relative;
	}

Problem ist jetzt: Bild verschiebt sich bei verschiedenen Auflösungen... Im Internet stehen zwar viele Anleitungen aber bisher hat 0 geholfen

Der Header steht übrigens DIREKT als erstes DIV nach dem Body Tag. Deswegen kann es an der DIV Hierarchie nicht liegen.

xGreekz7x · 25. Januar 2014

Bitteschön:

CSS

#header {
    background: url(images/header-background.png) no-repeat center top;
	margin: 0 auto;
	padding: 0;
	width:1920px;
	height:190px;
	position:relative;
}

P3rform3r · 25. Januar 2014

Habe ich 1 zu 1 kopiert und hat nichts gebracht.

Siehe hier: http://daz-clan.com/

Jony · 25. Januar 2014

Nur um kurz mal die Thematik zu konkretisieren.
Du willst, dass wenn der Browser verkleinert (vergrößert) wird der Header trotzdem in der Mitte ist?
- Falls ja, einfach die Angabe der Breite weglassen. Schon wird sich Dein Problem von alleine beheben.

//Edit:
#Rechtschreibung

P3rform3r · 25. Januar 2014

Zitat von Lenox

Nur um kurz mal die Thematik zu konkretisieren.
Du willst, dass wenn der Browser verkleinert (vergrößert) wird der Header trotzdem in der Mitte ist?

Exakt. Also das das Logo hier: http://daz-clan.com/
... immer sichtbar bleibt und nicht nach rechts geht.

Jony · 25. Januar 2014

Zitat von Performer

Exakt. Also das das Logo hier: http://daz-clan.com/
... immer sichtbar bleibt und nicht nach rechts geht.

Antwort steht oben. Die Erklärung dafür ergibt sich daraus, wie Div's und die jeweilige Verarbeitung funktionieren.

Bei näheren Fragen, einfach eine PN.

Falls Du daran interessiert bist, nach einem bestimmten Standard zu programmieren würde ich Dir ans Herz legen mit der Auflösung 1280x1024 zu arbeiten. Damit wirst Du heute 90% der Benutzer abdecken. Und um größere Auflösungen zu realisieren einfach die Farben auslaufen lassen. Sieht klasse aus und keiner weiß, dass die Website für eine andere Auflösung gedacht ist.

//Edit:
'Tip(p) hinzugefügt

xGreekz7x · 25. Januar 2014

Ja dann lass einfach nur die Breite von meinen Code weg und schon passts.

**Flake** · 25. Januar 2014

#header {
background: url(images/header-background.png) no-repeat center top;
margin: 0 auto;
padding: 0;
width:1920px;
height:190px;
left: XXXpx;
top: XXpx;
position:relative;
}

Weswegen dann nicht so?

P3rform3r · 25. Januar 2014

Zitat von xGreekz7x

Ja dann lass einfach nur die Breite von meinen Code weg und schon passts.

Genau das wars. Danke

breadfish.de 12. März 2022