Hintergrundbild einfügen am linken Rand

  • Hallo,

    irgendwie komme ich nicht weiter mit meinem Blog-Design.
    Ich würde gerne am linken Bildrand meines Blogs ein Foto/Logo einbinden.
    Also das quasi hier links neben in dem weißen jetzt ein großes langes Foto/Logo wäre :-) .
    Wie und vor allem auch wo kann ich das machen?

    Vielen tausend Dank im Voraus


    Liebe Grüße

    Marcel

    • 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

  • Das geht per CSS-Anweisung

    Code
    backround-image: url(...);
    background-position: left;

    für body {}. Diese schreibst Du in die style.css des Themes.

  • noch mal nachfragen....

    Habe mal aus der style.css des Themes einen Teil rauskopiert:

    *{
    border: 0;
    margin: 0;
    padding: 0;
    }
    body{
    background: #ebe9e1 url(images/bgr.jpg) repeat-x top;
    color: #555555;
    font: 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
    }
    a{
    color: #e8a02c;
    text-decoration: none;
    }

    Müsste der Body teil demnach wie folgt aussehen:
    body{
    background-image: http:http://www.....de/Ordner(Dateiname.jpg);
    background-position: left; no-repeat;
    color: #555555;
    font: 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
    }

    Hoffe ich bin nicht zu nervig.... :-) aber bin da leider nicht so erfahren drin/naja so gut wie gar nicht....


    Liebe Grüße und Danke

    Marcel

  • nee, so wird das nix.
    Das geht genau wie infected schon geschrieben hat:

    Zitat

    Das geht per CSS-Anweisung Code:
    backround-image: url(...);
    background-position: left;

    für body {}. Diese schreibst Du in die style.css des Themes.

    Also keine komplette URL sondern das Bild packst Du in den Images Ordner und dann, was er schrieb: "für body {}"!

    Zitat

    body{
    background: #ebe9e1 url(images/bgr.jpg) [COLOR=Red][hier kannste auch noch [COLOR=Black]top left[/COLOR] reinsetzen, ist aber nicht nötig][/COLOR];
    color: #555555;
    font: 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
    }

    Ob das Ganze greift kannste ja einfach testen, indem Du statt "#ebe9e1" mal locker "#fe0f03" einsetzt. Spätestens jetzt siehst Du, ob und wo die Änderungen greifen... :)

    Einmal editiert, zuletzt von gericoach (9. August 2010 um 19:02)

  • da ist noch ein weiterer body style im spiel; in http://marcelroempke.de/wp-content/the…es/6-whitey.css

    PHP
    body{ background: #ffffff url(whitey/bgr.jpg) repeat-x top; }



    und da der spaeter aufgerufen wird, ueberschreibt der jeglichen versuch, was in der style.css zu aendern (im body style).

    und den kannst du nicht einfach loeschen, weil der die horizontalen grauen streifen macht.

    einen versuch wert:
    du koenntest da das #ffffff entfernen; und deinen hintergrund als html in style.css einsetzen:

    PHP
    html { background: url(images/bgr.jpg) left top no-repeat; }



    nb: firefox mit developer add-on ist da eine grosse hilfe, durch die styles durchzuschauen.

  • Werde ich gleich mal ausprobieren.
    Wusste nicht, dass es genügt nur url zu schreiben, bin davon ausgegangen das der Browser wissen muss, wo das Bild abgelegt ist.

    Werde berichten

    Danke jedenfalls für die zahlreiche Hilfe

  • Also das Bild habe ich nun endlich mit eurer tatkräftigen Unterstützung hinbekommen.
    Das Bild wurde zunächst zig fach wiederholt. Deshalb habe ich dann in der Style.css no-repeat eingegeben. Hat auch geklappt.
    Problem ist nur, dass nun der Rest der Seite in beige (anstelle von weiß ist) und ein Balken fehlt, der das Menü umrahmt.
    Vermutlich wird durch den Code die bgr-Datei rausgenommen?

    hiermal mein Versuch in der Style.css:
    background: #ebe9e1 url(images/Hintergrund.jpg)no-repeat;
    sowie in der whitey.css:
    body{ background: html { background: url(whitey/Hintergrund.jpg) left top no-repeat; } url(whitey/bgr.jpg) repeat-x top; }
    #header h1 { background: url(whitey/logo-trans.png) no-repeat; }
    #search{ background: url(whitey/bgr-search.gif) no-repeat; }

    Danke jedenfalls auch für das erklären, dass es reicht nur url zu schreiben :-) peinlich....

    DANKE

  • das beige ist halt definiert, wechsle mal den Farbton #ebe9e1 gegen #ffffff aus, dann sollte das weg sein. Sicher, dass das Menü umrahmt war? Da hasdt Du nichts gefummelt!
    Tipp: schnapp dir noch ein Grafikprogramm und änder die Blickrichtung, Du bist dem Inhalt abgeneigt, das kommt nicht gut...
    Den Passus von Woo-themes würde ich auch etwas "abschwächen".

  • Tausenddank an alle für die nette und gute Unterstützung.

    Es war auch kein echter Rahmen, sondern es verlief von lins nach rechts über den ganzen Bildschirm überhalb und unterhalb der Menüliste ein Strich.

    http://www.woothemes.com/demo/?name=fresh-news

    Habe mal den Link eingefügt, von dem Theme wie es aussah.

    An Gericoach:
    Was genau meinst du mit Passus abschwächen? Kann ich mir ncihts drunter vorstellen:-)


    DANKE, DANKE, DANKE

    Einmal editiert, zuletzt von Marcelreompke (10. August 2010 um 13:26)

Jetzt mitmachen!

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