bild über Backgroundbild

    wie kann ich das mittels WP ausgewählte BG-Bild mit "on top" Bild ändern?
    Konkret: ich wähle in WP (Design/Background) ein Bild aus. Nun möchte ich aber, dass ein zusätliches Bild (Transparent mit Verlauf zu Hintergrundfarbe) drüber gesetzt wird. Also, egal welches Bild ich für den Hintergrund wähle, das png ist immer drüber.
    Habe folgendes versucht:
    style.css:

    Code
    /* Body & Main
================================================== */
body { background: #eee url("http://forum.wpde.org/images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
[COLOR=#ff0000]body ontop{ url("http://forum.wpde.org/images/ontop.png") top left no-repeat; z-index:10;}[/COLOR]

    Header.php:

    PHP
    <body <?php body_class('body'); ?>>
[COLOR=#ff0000]<div id="body" class="ontop">[/COLOR]

    funktioniert aber nicht. Wie kann ich das umsetzen? Ist das so überhaupt wenigstens ansatzweise korrekt?

    • Gerade eben
    • 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

    hmm, warscheinlich hast Du da Recht. Wie würdest Du das realisieren? Also, die idee ist:
    Background-color: in WP Design/Hintergrund definiert
    Background-Image: in WP Deisng/Hintergrund definiert
    On-Top Bild: fest installier, soll immer über Bild + Farbe liegen

    im Grunde hast du es ja fast

    header.php

    PHP
    <body <?php body_class('body'); ?>>
[COLOR="#FF0000"]<div class="ontop">[/COLOR]

    und wieder schließen footer.php

    Code
    [COLOR="#FF0000"]</div>[/COLOR]
</body>

    css

    Code
    .ontop { background: url("http://forum.wpde.org/images/ontop.png") top left no-repeat;}


    das z-index brauchst du hier glaub nicht

    klappt immer noch nicht...
    CSS:

    Code
    /* Body & Main
================================================== */
body { background: #eee url("images/main-bg.png") repeat; nowhitespace: afterproperty; font: 12px/1.8 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #444; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body a { color: #f15a23 } /*main link color*/
body a:hover { text-decoration: none; color: #000 }
[COLOR=#b22222].ontop{ url("images/ontop.png") top left no-repeat; }[/COLOR]

    Header.php:

    PHP
    <!-- Begin Body
================================================== -->
<body <?php body_class('body'); ?>>
[COLOR=#b22222]<div class="ontop">[/COLOR]

    footer.php

    Code
    wp_footer(); ?>
[COLOR=#b22222]</div>[/COLOR]
</body>
</html>

    hmm, Domain:
    http://www.sport-templates.com

    Noch einen Ansatz, wo der Fehler liegt?

    domino: Ziel ist, dass wer auch immer einen Hintergrund bestimmt (egal welches Bild er wählt) auf diesem Bild immer noch ein halbtransparentes Bild drauf liegt, das einen Übergang zur Hintergrundfarbe mitbringt. (Normalerweise würde man sowas komplett in Photoshop machen mit Verlauf usw.)

    >> ontop.png

    du hast background: vergessen

    also nicht

    Code
    .ontop { url("images/ontop.png") top left no-repeat; }

    sondern

    Code
    .ontop { background: url("images/ontop.png") top left no-repeat; }

    sieht schon viiiel besser aus, danke für den Tipp!! Aber irgendwie habe ich noch einen positionierungsfehler, setzt nicht oben an...habe ich mit

    Code
    margin-top: -50px

    gelöst. Gibts da noch eine smartere/css-freundlichere Lösung?

    würde ich auf die Schnelle auch so machen

    Code
    .ontop {
    background: url("images/ontop.png") no-repeat scroll left top transparent;
    [COLOR="#FF0000"]margin-top: -30px;[/COLOR]
}


    und damit der Inhalt wieder weiter unten ist, diese Anpassungen

    Code
    #wrap {
    background: url("images/header-bg.png") repeat scroll 0 0 transparent;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    margin-bottom: 25px;
    [COLOR="#FF0000"]position: relative;[/COLOR]
    [COLOR="#FF0000"]top[/COLOR]: [COLOR="#FF0000"]5[/COLOR]5px;
}

    das margin-top: -30px; kannst glaub weglassen wenn bei wrap mit position und top gearbeitet wird

    Einmal editiert, zuletzt von Tutrix (25. November 2012 um 20:37)

    das hast ja schon drin

    wp-content/themes/pytheas/style.css (Zeile 28 )

    Code
    /*main containers*/
#wrap { [COLOR="#FF0000"]margin-top: 25px;[/COLOR] background: url("images/header-bg.png"); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15); margin-bottom: 25px }

    also nur anpassen

    margin-top in top ändern und position hinzufügen

    Einmal editiert, zuletzt von Tutrix (25. November 2012 um 20:44)

    ändere mal

    Code
    <!DOCTYPE html>

    in

    Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    und dann sehen wir weiter

    z.B.
    bei body mal height: 100%; hinzufügen

    sodele jetzt kann man endlich richtig anpassen ;-)

    ontop = ändern in

    Code
    .ontop {
    background: url("images/ontop.png") no-repeat scroll left top transparent;
    height: 100%;
}

    in der style.css hinzufügen

    Code
    html, body{
    height: 100%;
}

    Einmal editiert, zuletzt von Tutrix (25. November 2012 um 22:25)

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden