Body background-image an zentriertes div anpassen

[XInfinity]

Hi,

ich habe über CSS ein Hintergrundbild für body definiert.
Außerdem habe ich einen wrapper div, der 960px breit ist und zentriert wird.
Wenn das Browserfenster jetzt kleiner als 960px breit ist, dann verschiebt sich mein Layout, was nicht so toll aussieht.

Hier meine Seite:


Wie kann ich das beheben?
Am besten wäre natürlich nur mit (X)HTML/CSS, aber wenn es nicht anders gehen sollte ...

Ich habe natürlich schon gesucht, aber leider fehlen mir die passenden Suchbegriffe.

lg XInfinity

 

[Herr_D]

AW: Body background-image an zentriertes div anpassen

Was willst du beheben?


Soll das Hintergrundbild zentriert sein?


top center;


im css

 

[owieortho]

AW: Body background-image an zentriertes div anpassen

 background-position: top center;

Wenn Dein Bild breiter ist als der Viewport, dann ragt es mit dieser Anweisung links und rechts über den Viewport hinaus. Wenn dieser verbreitert wird, dann rückt die horizontale Bildmitte nach rechts. Wenn Du das "center" streichst,müsste es gehen.

 

[XInfinity]

AW: Body background-image an zentriertes div anpassen

Danke für eure Antworten.

Ursprünglich habe ich "background-position: top center;" genommen, aber wenn ich nur "top" schreibe, bringt es auch nichts ...

Hier nochmal zur Verdeutlichung, was passiert, wenn das Browserfenster kleiner als 960px wird:


lg XInfinity

 

[XInfinity]

AW: Body background-image an zentriertes div anpassen

Gibt es denn wirklich keine Möglichkeit, dieses Problem zu lösen?

Ich weiß, warum das passiert, aber ich kenne keine andere Möglichkeit ...
Aber es muss gehen, da ich auch auf anderen Seiten so etwas gesehen habe, wo das Layout sich nicht von der Fenstergröße beirren lässt ...

Ich hoffe ihr könnt mir helfen.

lg XInfinity

 

[krid2873]

AW: Body background-image an zentriertes div anpassen

Hi,

eine Möglichkeit wäre für deine Seite über CSS eine Mindestbreite vorzugegeben:

html
{
   min-width: 960px;
}

Zum Nachlesen:



Oder den Schriftzug Infinity Projects statt als Hintergrundgrafik besser als echte Überschrift (h1) umzusetzen. Die Überschrift kann dann noch mit Hilfe der Image Replacement Technik (die Glider-Levin Methode würde ich vorziehen) optisch aufgemotzt werden.
Zum Nachlesen:
Übersicht: Image-Replacement-Techniken ? Artikel von Jens O. Meiert

 

[XInfinity]

AW: Body background-image an zentriertes div anpassen

Wow, vielen Dank, krid!

min-width hat super geklappt!
Endlich mal etwas, das man mit einer Zeile Code lösen kann!

Image Replacement brauch ich somit gar nicht, owohl ich das bestimmt irgendwann mal gebrauchen kann.

----

Noch eine kleine Frage, die zwar hier nicht ganz reinpasst, aber wegen der ich keinen neuen Thread aufmachen möchte:

Der W3-Validator sagt mir, dass

body {overflow-y: scroll; }

invalide ist.

Damit habe ich die Scrollleiste auf der rechten Seite immer hingepinnt, auch wenn man nicht scrollen muss.
Damit hat man kein Hüpfen der Seite beim Durcklicken in der Navi.

Aber es funktioniert ...
Ist es jetzt schlimm ... ? (Stört das irgendwen, wenn der Code invalide ist, aber es trotzdem funktioniert?)

lg XInfinity