Hintergrundbild in eigenes Template einfügen

  • Hallo
    Ich bin neu hier. :confused:
    Ich habe ein eigenes Template in mein fiver-theme in wp-content - eigefügt.
    ich bin Code-unerfahren. ich möchte gerne ein Hintergrund-Bild in das eigene Template einsetzen.
    Zwei Zeilen Code habe ich irgendwo gegoogelt, kann aber nicht herausfinden, wie / wo das Bild rein muß/kann.
    Das sieht so aus:


    An welche Stelle (zwischen welche zeichen) setze ich den link zum Bild ein?

    Herzlichen Dank für eine Antwort.

    Kai

    Einmal editiert, zuletzt von maxe (30. Januar 2013 um 14:37)

    • 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

  • Mir schwant Du bekommst die Meldung "nutze bitte den CODE-Tag zum einbinden von Code" ;-)

    Bitte öffne die style.css und gib folgendes ein:

    CSS
    body {
        background-image: url(/test.jpg)!important;
        background-repeat: repeat;
    }

    Das Bild test.jpg liegt dabei im selben Ordner wie die style.css und wird in diesem Beispiel sowohl horizontal als auch vertical wiederholt.

    Oder aber fixiert, ohne mit zu scrollen und mittig ausgerichtet:

    CSS
    body {
    	background-image:	url(/test.jpg)!important;
    	background-attachment:	fixed;
    	background-repeat:	no-repeat;
    	background-position:	center center;
    }

    Einmal editiert, zuletzt von BumbleBee (30. Januar 2013 um 14:40)

  • nutze bitte den CODE-Tag zum einbinden von Code ;-)

    [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]

  • Hallo nochmal
    Ich habe im stylesheet die von BumbleBee angegeben Code-Zeilen eingetragen. Das hat nicht weiter gebracht.

    Die meldung, die bumblebee angegeben hat, habe ich nicht bekommen. Sondern es funzzt einfach nicht, bringt nicht die erwünschte Änderung. (Hindergrundbild in eigenem Template ...).
    Es geht darum, ein Backgroundbild der Site halbtransparent zu überlagern, damit der Text der einzelnen Seiten wieder besser lesbar wird. Ohne harte Farben. siehe http://www.hansen-wolter.de

    Oben habe ich die Code-Zeilen des eigenen Templates eingegeben. Müßte der entsprechende Code nicht darin eingegeben werden, der mir ermöglicht ein peramnentes HintergrundBild !!nur in diesem speziellen eigenen Template!! wiederzugeben.
    Das "neuestemplate" unterscheidet sich vom Standard-Template für Seiten.

    Danke für Hilfe!! Wie gesagt, ich bin leider ziemlicher Frischling. Deshalb brauche ich ein paar Hinweise mehr als Erklärung.

    Kai

    Einmal editiert, zuletzt von Kai Hansen (30. Januar 2013 um 16:53)

  • 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

    [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 lt Firefox hat er das drin:

    Code
    body.custom-background {    background-color: rgb(218, 222, 237);
        background-image: url("http://www.hansen-wolter.de/wp-content/uploads/2013/01/Nebel-NY-Bruecke-e1359559585466.jpg");
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
    }


    Und das zeigt er mir auch an. Deshalb weiß ich jetzt auch nicht was er will. Oder ist die Seite nur ein Beispiel?

    Einmal editiert, zuletzt von BumbleBee (30. Januar 2013 um 18:19)

  • Er möchte über den body bg noch einen bg drüber setzen für den wrapper, damit man den Text besser lesen kann.
    So hab ich es verstanden.

    [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]

  • er könnte es auch moderner über

    Code
    #wrapper{background-color: rgba(255,255,255,.5);}


    machen, wird aber leider von älteren Browsern nicht unterstützt.

    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]

  • Hallo zusammen
    Also erst mal einen herzlichen Dank für die Mühe, sich einzudenken in meine Frage!!! Ja, maxe hat das richtig verstanden. Es geht mir nicht um den body-Hintergrund (gesamt), sondern um einen (1) zusätzlichen Hintergrund für jede einzelne (text-) Seite. Das soll die Lesbarkeit erhöhen, weil der body-brackground mit einer Struktur (Brücke) den laufenden Infotext etwas unterbricht.

    Ich habe die Tipps von Maxe befolgt, und das in das style-sheet unter wrapper eingefügt.
    Mal ohne Verweis auf das gewünschte BILD, man mit Verweis. ich kopier das mal rein (s.u.). Beides hat keine Auswirkungen gehabt.
    Kann es nicht doch sein, daß ich das innerhalb einer eigenen Seiten-template für einzelne Seiten machen muß/kann? Ich kann im Editor dieses Template rechts sehen und komme in den Code rein. Der müßte doch gestaltbar sein?!! (das "neuestemplate.php" kopier ich ganz unten rein!

    Hier der Code im style-sheet:

    Und jetzt nachfolgend das "neuestemplate.php, das im editor in der Liste rechts steht. Da habe ich einfach zwischen header und footer den Code der index.php reinkopiert und dne gegoogelten Tipp:

    PHP
    <php<div id="background"> 
    <img src="<?php bloginfo('template_url' ); ?>/images/http://www.hansen-wolter.de/wp-content/uploads/2012/01/Text-background.jpg" alt="background" >/php


    Der hat aber nicht das gewünschte Ergebnis gebracht:


    Vielen Dank für die Hinweise.
    herzlichen gruß
    Kai

    Einmal editiert, zuletzt von maxe (31. Januar 2013 um 11:35)

  • Ich hatte es schon mal geschrieben: Bitte Code hier als solchen auch im Forum über die Buttons definieren!!

    Und wenn du nicht liest, was wir schreiben ... SELBER SCHULD!
    Wer z.B. hat gesagt, dass du

    PHP
    <div id="background">  
    <img src="<?php bloginfo('template_url'); ?>/images/http://www.hansen-wolter.de/wp-content/uploads/2012/01/Text-background.jpg" alt="background"; Einfügung KH


    in die style.css einfügen sollst :evil::roll:

    Bitte noch mal genau lesen.

    [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]

  • Du bringst anscheinend gewaltig was bei CSS und PHP/HTML durcheinander. Was maxe meinte ist, dass Du alles rückgängig machen solltest und einfach nur zusätzlich in Deine CSS das schreibst:

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

    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]

  • Danke für die Korrektur. Es ist einfach so, daß ich noch viel zu wenig weiß, was ich da eigentlich mache. deshalb auch danke für den Hinweis von SirEctor, dass ich "einfach in die CSS ... zusätzlich den von Maxe genannten Code reinkopiere.

    Das habe ich getan und hübsch gespeichert. Und nu? Keine Veränderungen sind sichtbar. Sorry, ich komme mir wirklich dämlich vor.
    Gruß
    Kai

  • In welchen Ordner hast Du das Bild wrapper_bg.jpg gespeichert? Am Besten Du gibst den kompletten Pfad an.

    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]

  • Mach mal was billiges:

    setz den #wrapper so:

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

    Das Ergebnis sieht dann so aus:

    P.S.:
    Mit den Farbangaben (den 1´en) und der Transparenz (die 0.5) kannst Du experimentieren. In diesem Fall bedeutet es das fast Schwarz zur hälfte transparent angezeigt wird.

    P.P.S.: Aber das hat eigentlich der maxe schon auf der ersten Seite geschrieben. Nur das er es mit weiß (255,255,255) gemacht hat.
    (hatte ich gerade beim erstellen übersehen...)

    Einmal editiert, zuletzt von BumbleBee (31. Januar 2013 um 13:22)

  • war ich nicht, war der SirEctor.

    Außerdem scheint der Kai unsere Antworten nie ganz zu lesen. Denn ich hatte auch geschrieben, wo das Bild liegen muss. Aber mit der bg-color geht es ja jetzt vielleicht einfacher.

    [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]

  • [FONT=century gothic][COLOR=#000000]Ach ja. Okay.

    Um die Browserkompatibilität herzustellen kann folgendes machen:
    [/COLOR][COLOR=#000000]
    [/COLOR][/FONT]

    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, .3);
    [/FONT][/COLOR][COLOR=#000000][FONT=century gothic]background-color: transparent\9;
    [/FONT][/COLOR][FONT=century gothic][COLOR=#000000]filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
    zoom:1;
    [/COLOR][/FONT]

    [FONT=century gothic][COLOR=#000000]

    Damit werden alle Browser unterstützt.

    Die Angabe #4CFFFFFF heißt Transparenz auf .3 (also .3 * 255 = 76.5 in Hexadecimal eben 4C) und die Farbe FFFFFF (also weiß oder in rgb 255,255,255).

    Findet sich hier auf yatil![/COLOR][/FONT]

    Einmal editiert, zuletzt von BumbleBee (31. Januar 2013 um 13:38)

  • Erst mal Euch allen herzlichen Dank.

    "Kai hat das nicht genau lesen" stimmt insofern, als ich gar nicht genau verstehe und unterscheiden kann, zu unerfahren. Maxe, tut mir leid, wenn Dich das sauer macht.
    Und SirEctor hatte recht, als er sagte, ich verwechsle ... - insofern helfen mir seine sehr schlichten Anweisungen weiter.

    Ich hatte aber vorher schon den Code von Maxe genau so reinkopiert, wie er das geschrieben hatte, dann erst mit dem Pfad zur mediathek, wo das Bild lag/liegt, welches ich als background will.

    Der Tipp von bumblebee (Danke!!, das ist auch sonst hillf- und lehrreich) ist fein und den hatte ich auf anderem Wege (nicht transparent) schon mal realisiert. der trifft aber nicht, was es sein soll. Sorry, das haut optisch zu sehr rein.

    Zitat

    SirEctor schreibt: "[COLOR=#333333]In welchen Ordner hast Du das Bild wrapper_bg.jpg gespeichert? Am Besten Du gibst den kompletten Pfad an.[/COLOR]ich habe jetzt anstelle"

    .
    Also habe ich den Bildpfad aus der Mediathek statt wrapper_bg.jpg eingefügt (ein .png-Bild).
    Es entsteht leider noch immer kein Hintergrund-Bild auf dem Textfeld der einzelnen Seiten.

    Danke. Kai

Jetzt mitmachen!

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