[BLOGGER] Bilder unter Posttitel ✤✤

Hallöchen alle zusammen. :D
So, mal wieder ein Tutorialchen ^^
Ich wurde von einer Bloggerin gefragt, wie man denn ein Bild unter dem Posttitel platzieren könne. Ich hab die CSS für sie geschrieben und weil ich denke, dass es ganz interessant werden kann, hab ich gedacht ich schreib ein Tutorial darüber.

Das Endergebnis schaut zum Beispiel so aus:

Als erstes braucht ihr ein Bild, das ihr platzieren möchtet, das kann ein Pattern sein, oder ein einzelnes Bild, das euren Vorstellungen entspricht, das ladet ihr dann hoch und dann geht es in den HTML-Bereich.

Um den Titel anzusprechen benutzen wir .post h3, das Hintergrundbild wird mit einem pseudoelement platziert.

Als erstes müssen wir allerdigns nur das h3-Element vorbereiten, das machen wir mit einer relativen Platzierung.

.post h3{
 position: relative;
}

Haben wir das, können wir schon das pseudoelement beschreiben. Der Content muss wie so gut wie immer leer sein, die Position absoulute und 100% von oben, also direkt unterhalb des Posttitels. left muss 0 sein und dann noch Höhe und Breite des Bildelements. Und das Bild wird durch den Bildlink verlinkt.

.post h3:after{
 content:'';
 position: absolute;
 top: 100%;
 left: 0px; 
 background: url(BILDLINK);
 width: 900px; /* Bildbreite */
 height: 30px; /* Bildhöhe */
}

Das wär's eigentlich, allerdings kann es dann vorkommen, dass das Bild in den Text reicht, also müsst ihr im ersten Teil noch eine margin einfügen, die der Höhe eures Bildes entspricht in meinem Fall sehe die obere CSS also so aus:

.post h3{
        position: relative;
        margin-bottom: 30px; 
}

Und dann seid ihr fertig. :D