Antworten auf deine Fragen:
Neues Thema erstellen

Body background-image an zentriertes div anpassen

XInfinity

Art is infinite!

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
 
Zuletzt bearbeitet:

Herr_D

offline

AW: Body background-image an zentriertes div anpassen

Was willst du beheben?


Soll das Hintergrundbild zentriert sein?


top center;


im css
 
Zuletzt bearbeitet:

owieortho

Aktives Mitglied

AW: Body background-image an zentriertes div anpassen

Code:
 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

Art is infinite!

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

Art is infinite!

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

Noch nicht viel geschrieben

AW: Body background-image an zentriertes div anpassen

Hi,

eine Möglichkeit wäre für deine Seite über CSS eine Mindestbreite vorzugegeben:
Code:
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

Art is infinite!

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! :D

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
Code:
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
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben