CSS und unterschiedliche Größe des Monitors?

Ich mache eine Website (WIP). Ich bin auf einige CSS-Probleme gestoßen, hoffe ihr könnt mir helfen.CSS und unterschiedliche Größe des Monitors?

Meine aktuelle Situation:

I am Bild haben, lässt es „bg.png“ mit der Breite über 2500px, und in der Mitte des Bildes hat mein Logo Hintergrund genannt.
Meine Website sollte alle Größe (von kleinen 800 x 600 bis 2400 x XXX) Benutzer.

Meine Probleme:

Wie zentralisieren ich das Hintergrundbild (bg.png), so dass das Logo immer in der Mitte (horizontal) positioniert unterschiedlicher Größe von Monitoren Bildschirm?

Quelle

2010-06-11 studdler

Da Sie ein neuer Benutzer sind, stellen Sie sicher, dass Sie auf das Häkchen "Akzeptieren" klicken, wenn eine Antwort Ihren Anforderungen entspricht. –

Fragestellung übrigens (aktuelle Situation -> Problem/gewünschtes Verhalten). –

Sie sollten wissen, dass einige Bildschirme größer als 2500 sind. Und dass Sie etwas auf mehreren Bildschirmen auch erweitern können. Also 2500 ist keine ausreichende Grenze. – Arkh

body { background: url('bg.png') 50% 50% no-repeat; }

Dies wird in der Mitte der Seite das Bild in voller Größe platzieren, und der Benutzer wird so viel von diesem Hintergrundbild als ihr Browser-Fenster erlaubt sehen.

Quelle

2010-06-11 07:31:13

Danke, es funktioniert. Aber ich muss noch 9 Minuten warten, um eine Antwort zu akzeptieren. Danke Graphain – studdler

Willkommen Speddler, froh zu helfen. Es lohnt sich, sich zu registrieren, damit Sie Ihre Fragen und Antworten im Laufe der Zeit verfolgen und andere dazu ermutigen können, Ihnen zu helfen. –

Notiert mit Dank :) – studdler

Wenn es nur eine Logo-Datei war, konnte man

verwenden

<style> 
img 
{ 
    position:absolute; 
    left:-50%; 
    top:-50%; 
    z-index:-1; 
} 
</style>

Quelle

2010-06-11 07:34:48

Dies zentriert das Bild nicht genau. Die linke Seite des Bildes ist zentriert, aber die Mitte des Bildes ist nicht zentriert. – strager

Um dies zu tun, fügen Sie Marge-Links: -50%, Marge-Spitze: -50%. – Sjoerd

#your_img { 
    width: 2500px; //In example 2500px 
    margin: 50%; 
    padding: -1250px; // 2500 divided by 2 
}

Es wahrscheinlich nicht funktionieren auf Internet Explorer, aber man kann einen kleinen Hack mit Position verwenden: absolute, wie oben

Quelle

2010-06-11 08:23:44 user170609

#your_img { 

    position: absolute; 
    left: 50%; 
    margin: -1250px; 
}

Diese Lösung ist notwendig, wenn Sie img Element auf eine andere Box setzen. Aber sei vorsichtig - es könnte die Größe der Elternbox ändern.

Quelle

2010-06-11 08:26:55 user170609

CSS und unterschiedliche Größe des Monitors?

Antwort

Verwandte Themen