Hintergrundbild in eigenes Template einfügen

  • Du hast im Pfad noch /images vor http:// stehen, das muss weg. Also so

    Code
    [COLOR=#C80000][FONT=Consolas]background[/FONT][/COLOR][COLOR=#000000][FONT=Consolas]: [/FONT][/COLOR][COLOR=#000000][FONT=Consolas]url([URL]http://www.hansen-wolter.de/wp-content/uploads/2012/01/Text-background.jpg[/URL]) no-repeat top center fixed transparent[/FONT][/COLOR][COLOR=#000000][FONT=Consolas];[/FONT][/COLOR]

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    • 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

  • Sorry, das haut optisch zu sehr rein.

    Auch da hilft ein lesen!


    Zitat von BumbleBee

    [COLOR=#333333]P.S.:[/COLOR]
    [COLOR=#333333]Mit den Farbangaben (den 1´en) und der Transparenz (die 0.5) kannst Du experimentieren.

    Streiche kannst und setze SOLLST.

    Ansonsten wäre es doch wirklich schön, wenn Du Photoshop nimmst und uns zeigst was Du jetzt genau willst. Ich glaub nämlich das wir jetzt alle nicht ganz wissen was Du haben willst. Ich zumindest weiß nun nicht weiter. Einfach weil ich nicht verstehe was Dir vorschwebt...[/COLOR]

  • Macht es dich sauer, alles noch mal genau durchzulesen und dich mal dran zu halten?

    dann würde ich eher dem #wrapper ein Hintergrund-Bild geben. Aber mit

    PHP
    <div id="background">  
    <img src="<?php bloginfo('template_url' ); ?>/images/bg_body.jpg" alt="background"


    geht das nicht, lösch das als erstes mal wieder raus. Und eigentlich brauchst du auch kein eigenes Template, kannst du also wieder löschen.

    Jetzt gehst du in die style.css deines Themes und setzt dort den Background:

    Code
    #wrapper {
    background: url(/images/wrapper_bg.jpg) no-repeat top center fixed transparent;
    }

    Das Bild wrapper_bg.jpg legst du dann in deinem Themeverzeichnis in den Ordner images ab: wp-content/themes/DEIN-THEME/images

    Und SirEctor hat noch eine andere Variante für die style.css beschrieben, anstelle von meiner:

    Code
    #wrapper {
    background-color: rgba(1, 1, 1, 0.5);
    }

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • also das:

    soll besser sein, wie das:

    Sorry, das ich das nicht verstehen muss! (Nummer 2 ist übrigens meine Lösung von 14:34 Uhr, nur mit .5 als Transparenz!

    Also

    Code
    [COLOR=#000000][FONT=century gothic]background-color: rgb(255, 255, 255);[/FONT][/COLOR]
    [COLOR=#000000][FONT=century gothic]background-color: rgba(255, 255, 255, .5);
    [/FONT][/COLOR][COLOR=#000000][FONT=century gothic]background-color: transparent\9;
    [/FONT][/COLOR][FONT=century gothic][COLOR=#000000]filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#80FFFFFF,endColorstr=#80FFFFFF);
    zoom:1;[/COLOR][/FONT]

    Einmal editiert, zuletzt von BumbleBee (31. Januar 2013 um 14:18)

  • BumbleBee
    meintest du mich? Ich meinte nämlich nur Kay!
    Ich denke wir 2 sind uns nämlich da einig.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • OT: Ich denke wir sind uns alle einig, außer Kai ;-)

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Nee, ich versteh Kai nicht, das er es so mit dem Bild machen will! Das ist total verschoben, weil es den falsche Ausschnitt ist. Mit der rgba-Lösung und der Erweiterung von mir für alle Browser wäre das wurscht, weil ja egal welches Hintergrundbild kommt, das Ergebniss immer perfekt aussieht! Das versteh ich nicht, wie man das nicht machen will!

    Nachweislich geht es ja. Man muss eben nur mal mit den Werten spielen und sich dann entscheiden welchen man nimmt.


    P.S.: Und ja, wir 3 sind uns einig was einfach und korrekt umzusetzen ist!


    P.P.S.:
    Das Problem liegt leider hier:

    Es ist einfach so, daß ich noch viel zu wenig weiß, was ich da eigentlich mache.

    Als Tipp - gar nicht böse gemeint: Ich habe ein Buch namens "Das Website Handbuch" von Markt und Technik. Ist schon alt aber sehr lehrreich wenn man seine ersten Gehversuche macht! Ist vielleicht eine Überlegung wert in so etwas zu investieren.

    Einmal editiert, zuletzt von BumbleBee (31. Januar 2013 um 14:33)

  • Das ist total verschoben, weil es den falsche Ausschnitt ist.


    Er müsste ja einfach nur ein weißes Bild halbtransparent machen, ohne irgendwas drauf. Dann scheint doch die Brücke durch. Aber anscheinend will er es anders.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Ja, weißes Bild ginge auch. Es ginge auch ein halbtransparentes GIF oder PNG ;-) Man könnte auch einen weißen Punkt machen und den kacheln. Alles Möglichkeiten. Aber am unkompliziertesten ist wirklich rgba. Zumindest wenn man nur auf aktuelle Browser setzt, aber selbst für alte gibt es ja hier die Lösung. Und alles was zusätzlich geladen wird, ist eben zusätzliche Arbeit die man vermeiden sollte... Oder nicht?


  • Hallo
    Mal ohne die Emotionen. Ich realisiere den Tipp von bumblebee - und zeige das als png., was es werden soll.
    Und ich teile die Ansicht: Wenn die lösung mal da ist, dann kann ich mit den (Farb-)Werten spielen.

    Kai

  • Dann machs doch nicht so kompliziert und sags gleich so ;-)


    Code
    background-color: (1, 1, 30);
    background-color: rgba(1, 1, 30, .1);
    background-color: transparent\9;
    filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#1901011E,endColorstr=#1901011E);
    zoom:1;

    Das ist dann in etwa das was Du willst.

  • Tausend Dank !!!
    Ich habe den Code von bumblebee in ein extra #wrapper { ...} kopiert.
    Das sieht jetzt sehr gut aus. ich werde rumexperimentieren, wie ich es machen kann, daß das nicht übers Logo und nicht über die menues geht, sondern nur !! der background-größe nach bei den Textseiten geht.
    Danke Euch für Eure Geduld.
    Kai

  • bumblebbe
    Jetzt habe ich's. ich habe Deinen Code nach #article kopiert und kann dort mit dem Transparentwert (0.1 bis 0.9) spielen wie ich will.
    Also Danke. Der Code von bumblebee von 15.08 Uhr ist die Lösung, Suuuper!!

    Herzlichen Dank

  • Code
    article a img {
    padding: 5px;
    }


    Bitte auf 0px setzen! Dann passt das Bild auf der Seite "Ihre Berater" auch.

    und

    Code
    border: 0px solid rgba(0, 0, 0, 0.3);

    bringt nichts. Wenn Du den Border auf 0px setzt kann der auch nicht angezeigt werden.

Jetzt mitmachen!

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