Hintergundbild zentrieren

  • Nachdem ich alle diesbezüglichen Beiträge hier in diesem Forum und bei anderen CSS- bzw. PHP-Foren durchsucht habe, wende ich mich an euch:

    Ich bin leider kein Profi, und kriege eine Sache auf dieser Seite http://www.rbrt.de einfach nicht gebacken: das Hintergrundbild verschiebt sich, wenn man das Browserfenster verkleinert. Eigentlich logisch. Im Idealzustand (800x600) trennt der hellere Bereich rechts die Beiträge genau vom dunkleren Bereich der Nav-Leiste links.
    Wenn man nun aber mit Sidebar surft, verschiebt sich das Bild logischerweise nach rechts. Mir würde es am besten gefallen, wenn diese Trennlinie hell-dunkel IMMER zwischen Beiträgen und Nav-Leiste positioniert wäre.

    Das Hintergundbild habe ich in die Header.php eingebunden:
    [INDENT][FONT=monospace]<body style="background-image:url(http://www.rbrt.de/wp-content/themes/white-as-milk-10/hintergrundende.jpg); background-repeat:no-repeat;">[/FONT]

    [FONT=monospace]<body>

    [/FONT][/INDENT]Leider erreiche ich auch mit margin:auto keinen Effekt.

    Jemand eine Idee? Vielen Dank im Voraus!!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hab ich nicht ganz verstanden. Bei mir verschiebt sich nicht das Hintergrundbild, sondern der Inhalt davor, also Sidebar und Content, wenn ich das Browserfenster verkleinere oder vergrößere.
    Da das Hintergrundbild unverrückbar "festgenagelt" ist, und damit der Übergang vom helleren zum dunkleren Bereich immer den selben Abstand vom linken Rand hat, sollte auch die "Page" einen festen Abstand dazu haben. Somit bleibt Trennung zwischen Sidebar und Content immer an der richtigen Stelle, egal wie breit das Fenster ist.

    Code
    #page {
        margin: 20px 0 20px 180px;
        padding: 0;
        width: 620px;
        }

    So in etwas (unten beim 2. #page).
    Und im body das "textalign: center" rausnehmen.

    Gruß
    Ingo

    Wenn ich helfen konnte, bitte [ Gefällt mir ] klicken. :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!