background image

cymen

so ich bins gleich nochmal mit dem nächsten Problem.
Und zwar versuche ich gerade eine textur als Hintergrundbild zu definieren.
Ansich in css ja kein Problem:
background-image: (url);

allerdings benutze ich momentan das "minima plus"
theme von stopdesign.com

Bei diesem Theme wird in der stylesheet.css der background-image tag schon für die Begrenzungsrahmen des Hauptdesigns verwendet:

Code

body {
  background: #efefef url(background.jpg) repeat-y center;
  margin:0;
  padding:0px 20px;
  font:x-small Georgia,Serif;
  text-align:center;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

um das ganze nochmal zu veranschaulichen, hier der Blog: http://www.unique-design.org

das background.jpg ist folgendes Bildchen:

[Blockierte Grafik: http://www.unique-design.org/wp-content/themes/MinimaPlus/background.jpg]

Ist es trotzdem möglich eine textur als Hintergrund (hinter dem Hintergrund sozusagen) zu definieren?

danke schonmal im voraus

Werbepost

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

cymen

waaaaaah....
ich will jetzt endlich meine geile Textur in den BG verpflanzen.
Hilft doch bitte jemand dem verzweifelten cymen.

Gibt auch ein exklusives, persönliches und absolut einzigartiges Photoshopbildchen (Egal ob Wallpaper, romantisches Bildchen für die Freundin usw.) mit Inhalt deiner wahl als Extra für den Glücklichen der imstande ist mir zu helfen. (Referenzen stelle ich auf Wunsch gern zur Verfügung) ;)

\0

wenn dir jemand helfen will wird dies sicher geschehen. Ich glaube kaum das du jemanden motivieren wirst, wenn du ihm ein Bild anbietest. Ich denke ich spreche für alle, wenn ich dir sage das wir hier sind um anderen zu helfen, um im notfall auch hier geholfen zu bekommen oder einfach um anderen zu helfen.

zu deine frage: ich bin nicht der große designer und kann dir somit leider nicht helfen. Schau doch einfach bei de.selfhtml.org unter CSS. Vielleicht findest du dort die Lösung.

cymen

naja die Frage ansich hat ja nichts mit Design zu tun. Es geht ja nur darum eine textur als Hintergrund fest zu legen. Eben durch den "background-image"-Befehl.
Allerdings besteht ja bei mir das Problem das dieser Befehl schon für die Rahmenbegrenzung des Designs verwendet wird.

Hinzu kommt noch das ich so gut wie überhaupt keine Ahnung von css habe...

\0

Zitat von cymen

naja die Frage ansich hat ja nichts mit Design zu tun. Es geht ja nur darum eine textur als Hintergrund fest zu legen. Eben durch den "background-image"-Befehl.
Allerdings besteht ja bei mir das Problem das dieser Befehl schon für die Rahmenbegrenzung des Designs verwendet wird.

Das klingt für mich eigentlich doch nach design, aber lassen wir das. Ich kenne nicht alle Tricks bei CSS, würde aber logisch schlussfolgern, das du vielleicht ein Bild hinter das dein Hintergrundbild legen kannst. Da dein Bild aber ein jpeg ist gibt es dort keine Transparenz. Somit würdest du das Bild dahinter gar nicht sehen. Eine Möglichkeit mit mehreren Ebenen gibt es bei CSS ( nennt sich z-index). Das heisst dein neues Bild ist das background-image und drüber liegt eine Ebene wo das andere Bild ist. Darüber liegt nun deine Contentebene.

Ich hoffe das konnte dir helfen.

cymen

ja das hört sich schonmal sehr gut an. Werd das mal ausprobieren. Vielen Dank.

cymen

Okay, habs ausprobiert. Folgendes Problem:
z-index funktioniert nur in kombination mit einem div-tag der eine genaue positionsangabe des Bildes beinhalten muss. Ansich in einer html Datei ja kein Problem, aber ich muss die Änderungen in einer stylesheet.css vornehmen und ich hab keine Ahnung wie ich den <div> tag da einbauen soll bzw. wie ich ihn mit dem background-image kombinieren soll.
Hab jetzt nen paar Konstellationen durchgeführt, aber nichts funktionierte?
Lässt sich das überhaupt in eine stylesheet.css einbauen oder nicht? Und wenn ja, wie?

Fragen über Fragen...

telekommander

z-index ist ein Ansatz, aber nicht die Lösung.
Theoretisch willst du ein Bild hinter den <body> Tag legen, ins "minus" sozusagen. Der <body> Tag ist aber schon "ganz unten" .

Als Lösungsansatz:
Folgendes in die style.css einfügen, dabei gibts einen zusätzlichen <div> Container #back .
Die Bilder wurden getauscht und Farbangaben entfernt.

Code

#back {
  background: url(background.jpg) repeat-y center;
  margin:0;
  padding:0;
  }


body {
  background: url(pat.gif) repeat;
  margin:0;
  padding:0px 0px;
  font:x-small Verdana,Sans-Serif;
  text-align:center;
  color:#333;
  font-size/* */:/**/small;
  font-size: /**/small;
  }

Alles anzeigen

Und den neuen <div> Container im Template hinzufügen direkt nach dem <body> Tag und natürlich den </div> Endtag vorm </body> nicht vergessen.

Code

<body>
<div id="back">
.
.
.
</div>
</body>

Edit: Es bleibt trotzdem links und recht ein Rand von ca 5 Pixel vom background.jpg, die sind aber im Bild selbst, du wirst also um eine Bearbeitung des Bildes nicht drumherumkommen. Am besten setze die Ränder transparent( GIF Format ) und in der style.css auch gleich ändern.

cymen

Das klingt doch schon sehr vielversprechend. Allerdings ist mir nicht ganz klar wo ich den <div> container einfügen soll. Du Sagst im Template (Stichwort: <body>-tag).
Allerdings hab ich ich keine einzige Datei innerhalb des Temlates gefunden die auch nur Ansatzweise die typische html struktur erkennen lässt.
Ergo hab ich auch keinen <body> Bereich in den ich den div container einbinden könnte....

tut mir leid, entweder stell ich mich gerade extrem dumm an oder ich weiss auch nicht.

Trotzdem Danke für eure Geduld ;>

telekommander

Du musst einen musst einen <body> Tag haben, der gehört zum Grundgerüst einer HTML Datei :

HTML

<!DOCTYPE ....  >
<html>
  <head>
   <title>Titel</title>
  </head>
  <body>
    [ INHALT ]
  </body>
</html>

Für dein Theme "Minimal Plus" befindet sich der <body> Tag in der header.php, Zeile 19 .
Der Abschluss-Tag </body> in der footer.php, Zeile 10.
( Zeilenangaben beziehen sich auf das Original Theme )

Du setzt also in der header.php den <div id="back"> Tag gleich nach! dem <body> Tag, wie oben im Code beschrieben.
Genauso setzt du den Abschluss-Tag des Containers </div> vor! dem </body> Abschluss Tag.
Und natürlich die style.css nicht vergessen.

cymen

okay, alles gemacht wie bschrieben. klingt auch einleuchtent, sieht nur leider so aus jetzt:
http://www.unique-design.org

is mir schon fast peinlich jetzt...

telekommander

Auch kein Problem ...
Wenn du jetzt noch die richtige Dateiendung angibst passt es wieder.

Code

#back { 
  background: url(background.gif) repeat-y center; 
  margin:0; 
  padding:0; 
}

Denn der Dateiname des Bildes ist falsch, nicht GIF sondern JPG.

cymen

muhar du hast recht. Und dabei hatt ich das 5 mal angeschaut.
Naja das war jetzt ne schwere Geburt, aber vielen Dank für die kompetente Hilfe.

Ich Liebe Dich!

telekommander

:roll:

Willkommen! Melden Sie sich an oder registrieren Sie sich.

background image

Jetzt mitmachen!