Linie im Hintergrund des Posttitels ♥♥

Die Neele lässt heute endlich auch
 mal wieder etwas von sich hören!

Vielleicht haben sich einige von euch schonmal gefragt, wie man denn eigentlich eine Linie HINTER den Posttitel bekommt, ohne dass sie den Posttitel quasi durchstreicht. 

Mir wurde diese Frage schon öfters gestellt und deswegen habe ich mir überlegt, dass es wahrscheinlich auch einige von euch interessieren würde und ein Tutorial ganz nützlich wäre.

Hier seht ihr ein Beispiel meines eigenen Blogs. Ich habe eine relativ dezente, graue Linie gewählt, die hinter der eigentlichen Überschrift unterbrochen ist, sodass diese auch lesbar bleibt.

Im Prinzip legt ihr keine Linie im klassischen Sinne hinter die Überschrift, so wie ihr sie schon als "border-bottom" oder "border-top" zum Beispiel kennt (oben/oben Strich über/unter der Überschrift), sondern es handelt sich um eine Grafik, die ihr als Hintergrund für eure Überschrift hinzufügt. Damit die Linie allerdings unterbrochen wird hinter der Überschrift, da sie ja ansonsten durchgestrichen wäre, legt ihr fest, dass der Hintergrund eures Texts, nicht des gesamten Überschrift-Tags, weiß (oder gegebenenfalls der Hintergrund eures Post-Bereichs) sein soll. Und schon ist das Kunstwerk vollbracht! Wenn ihr ganz verrückt seid, könnt ihr euch eine gestrichelte Linie einfügen oder ein anderes tolles Muster. Probiert euch einfach mal aus. Jetzt aber zum Tutorial...

Hintergrundbild (Linie) hochladen

Da es sich, wie gesagt, um ein Hintergrundbild bei der Linie handelt, müsst ihr diese auf eurem Server / bei Blogger oder einem anderen kostenlosen Hoster für Fotos hochladen. Ihr könnt dazu beispielsweise diese Grafik benutzen, wenn ihr euch die Mühe nicht selbst machen möchtet :P (Link öffnen, die kleine Grafik oben links via Rechtsklick abspeichern und anschließend hochladen)

Nun braucht ihr die URL eures hochgeladenen Bildes, also das, was in der Adresszeile eures Browsers erscheint, wenn ihr nur das Bild aufruft, manche Fotouploader stellen euch auch direkt ein Feld zur Verfügung, in dem ihr die URL sehen könnt. Dass ihr die richtige URL benutzt, erkennt ihr daran, dass die Endung ".jpg" oder ".jpeg" lautet.

CSS anpassen

Jetzt müsst ihr noch den CSS-Code eures Bloglayouts unter dem Reiter "Vorlage" ändern. Und zwar fügt ihr unter dieser Zeile:

.post h3 {

folgendes ein:

background-image: url('URL EURES BILDES');
background-repeat: x-repeat;
background-position: 0px -10px;

Für die "URL EURES BILDES" setzt ihr die URL von gerade eben ein, die "-10px" geben an, um wie viel das Hintergrundbild horizontal verschoben ist. Dadurch könnt ihr die Höhe eures Striches im Hintergrund anpassen.

Nun löscht ihr unter dieser Zeile:

.post h3 a, .post h3 a:visited, .post h3 strong {

folgendes raus:

display: block;

Außerdem fügt ihr folgendes zusätzlich unter einem "}" hinzu:

.post h3 a:link, span {
background-color: #ffffff;
padding-right: 5px;
padding-left: 5px;
}

"#ffffff" ist die Hintergrundfarbe eurer Überschrift, die der allgemeinen Hintergrundfarbe eures Posts entsprechen sollte. (Wenn ihr eine andere Farbe als Weiß habt, müsst ihr euch die Farbe des Hintergrunds eurer Liniengrafik dementsprechend anpassen)
Die "5px" geben an, dass neben der Überschrift jeweils 5 Pixel "frei gelassen" werden, damit die Linie dort nicht direkt wieder beginnt - das sieht einfach ästhetischer aus, könnt ihr euch verändern, wenn ihr mehr oder weniger Abstand möchtet.

Ich hoffe, ich konnte das Mysterium der unterbrochenen Linie im Hintergrund lösen und ihr konntet alles soweit verstehen. Falls nicht, könnt ihr gerne einen Kommentar hinterlassen :)