Template mit 2 Hintergrundbildern (auch WordPress), rechts und links

Es soll nun darum gehen, ein Template mit 2 Hintergrundbildern zu erstellen. Ich gehen mal von HTML und CSS Kenntnissen aus. Desweiteren werde ich euch auch ein Beispeil geben, wie das in WordPress aussehen kann.

Nachstehend die HTML Datei:

Diese Div-Container müssen so ziemlich am Ende der HTML Datei stehen, da es ja ein Hintergrundbild  und der letzte geladene Container sein soll.

“hgrr” – steht für Hintergrundrechts
“hgrl” – steht für Hintergrundlinks

Ob ihr das so lasst oder nicht, ist egal, hauptsache es stimmt mit der CSS Datei überein.
Und nun die CSS-Datei:

#hgrr {
background-image:url(images/rechte_seite.png); /*kleiner Tipp: Bilddateien immer zusammenhängend schreiben also nicht “rechte seite” sondern “rechte_seite”*/
background-position: right top; /*oben rechts*/
background-repeat: no-repeat; /*man könnte jetzt auch schreiben: “repeat-y” dann wird das Bild nach unten hin erweitert*/
height: 100%; /*important*/
position: fixed; /*In meinem Fall soll das Bild am Rand feststehen*/
width:100%;
float:right;
top:0px;
}

#hgrl {
background-image:url(images/rinke_seite.png);
background-position: left top;
background-repeat: no-repeat;
height: 100%; /*important*/
position: fixed;
width:100%;
float:left;
top:0px;
}

So das ist es nun. Nicht vergessen, dass die CSS-Datei auch entsprechend geladen wird.
Wie das in WordPress aussieht:
-im Endeffekt genauso, nur muss der HTML-Teil in die Datei “footer.php” in eurem aktiviertem Theme. (…/wp-content/themes/dein theme)
Das sieht dann so aus:

Für die CSS-Dateien steht die “style.css” zur verfügung, welche sich direkt im Template-Ordner befindet.
Die Css-Daten müssen dann nur noch an irgendeine Stelle platziert werden.

Ein Beispiel: http://creativefree.bplaced.net/

Viel Spaß

Share Button

Related Posts:

Richard Kerber

Richard Kerber

Mein Name ist Richard Kerber. Zur Zeit bin ich Student der Wirtschaftsinformatik. Meine Interessen sind Programmierung/ Webdesign (HTML, CSS, Wordpress, Joomla!, VB.NET, JAVA, C), Sport (Biken u.a. in der Dresdner Heide) und alles rund um Technik. Darüber habe ich auch einen Blog gestartet, welcher in leicht verständlicher Form die ein oder anderen Dinge der Computer und Technikwelt erklären soll. Viel Spaß! P.S. Meine Firma: aranea GbR

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*