Halten Sie Hintergrundbild zentriert beim ändern der browser-Fenster

So, ich mache das layout für ein SMF-forum und das Hintergrundbild ist zentriert perfekt, wenn das Browserfenster breit genug ist. Jedoch wenn ich starten verkleinern des browser-Fensters, das hintergrund Bild bewegt sich nach Links. Hier ist mein Aktuelles CSS für den hintergrund:

body
{
    background: #fefff1 url(../images/img/bg.gif) no-repeat;
    background-position:top center;
    margin: 0 auto; 
    color: #7C3C4A;
    padding: 0px 5%;
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}

Hier ist ein screenshot von den Foren, so dass Sie visualisieren können es besser:

http://i.imgur.com/49pRI.png

InformationsquelleAutor user1251167 | 2012-03-06
  1. 6
    body
{
    background-color: #fefff1;
    background-image: url(../images/img/bg.gif);
    background-position: center center; /* First value is from left and second is from top. You can use use number as well*/
    background-repeat:no-repeat;
}​
    • Nicht genau das, was ich im Sinn hatte. Ich habe ein screenshot im ersten post nachlesen können.
    • Würden Sie mir den aktuellen link, damit ich einen Blick darauf werfen kann. Im Grunde hintergrund Bilder werden nicht angenommen, zu schrumpfen.
    • Check this out: jsfiddle.net/VPPRu
    • Hier: yaoidreams.com/forum2/index.php
    • Du musst dich anmelden um es zu sehen. Username = testaccount | Password = 123456
    • Das Problem ist nicht hintergrund Bild. Sie müssen Ihrem Körper die padding auf 0. jetzt den 5% von der Seite. Die Polsterung drückt Ihren Körper nach rechts und Sie denken, dass das Hintergrundbild verkleinern.

    InformationsquelleAutor Jay
  2. 1

    Dein code scheint zu Stimmen.

    Einzige, was ich Tat, war die Konsolidierung background-position in die gleiche background-Attribut oben in etwa so:

    body {
    background: #fefff1 url(../images/img/bg.gif) no-repeat top center;
    margin: 0 auto; 
    color: #7C3C4A;
    padding: 0px 5%;
    font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
}

    Hier ein JFiddle von it - JFiddle Link

    • Ooh okay. Aber das problem ist immer noch da.
    InformationsquelleAutor francisco.preller
Schreibe einen Kommentar