success

Eigene HP 8 - Back

Ein Hintergrundbild können wir schnell einfügen - wenn wir ein passendes haben - aber zum glück gibt es da sehr viel auswahl im Internet

Hier gilt es aber folgendes zu beachten:

Wenn wir ein solches Bild haben, kann es relativ klein sein, weil sich das Hintergrundbild immer der Seite anpasst - das heißt es multipliziert sich und das ist bei diesem Bild nicht schlimm man sieht es nicht:


 

 


 

 

Wenn wir allerdings ein Bild mit Muster und scharfen Kanten haben und sich das Bild dann multipliziert, dann sieht das ungfähr so aus:


 

 


 

 

Deshalb machen wir benötigen wir bei einem solchen Bild eine relativ große Vorlage - in der Breite am Besten 1000 Pixel - bei der Länge ist das schwer zu sagen - weil wir ja nicht wissen, wie lange mal eine Seite werden kann - aber 3000 Pixel sind für den Anfang schon mal sinnvoll.

 

Wenn wir dann das passende Hintergrundbild haben fügen wir es mit diesem Befehl ein:


body {background-image:url(Bild-Link);}
 

 

Wir könne aber auch unser Hintergrundbild festsetzen - dabei sollte das bild so groß sein, wie die Seite - dann stezen wir es fest, das heißt - wenn wir die Seite runterscrollen bleibt der Hintergrund stehen - die Erweiterung unseres Hintergrund-Codes ist rot gekennzeichnet:

 

body{background-image: url(Bild-Link);background-attachment: fixed;}

 

Jetzt sehen wir aber noch sehr wenig von unserem Hintergrundbild, weil es von verscheidenen Bildern des Originaldesigns verdeckt wird. Da ist einmal das blaue Bild unter der Navigation und den Hintergrund der Navigation - das beseitigen wir mit diesem Befehl:

 

td.edit_below_nav{visibility: hidden;width: 0px;}

td.edit_navi_headbg{background-image: url(url);}

 

Jetzt ist unter dem Textteil - dem Content der schwarze Hintergrund - mit diesem Befehl ist er weg:

 

td.edit_rechts_cbg{background-image: url(URL);}

 

Jetzt beseitigen wir den schwarzen Hintergrund hinter den Boxen:

 

td.edit_rechts_bottom{background-image: url(url);}

 

Jetzt bleibt rechts noch ein schwarzer vertikaler Streifen - um den zu entfernen nehmen wir diesen Befehl:

 

td.edit_rechts_sbg{visibility: hidden; width: 0px ;}
 

 

Die gesamten Codes fügen wir wieder zu unserem bisher erstellten CSS-Code hinzu. Jetzt macht unsere Hompage schon richtig was her.


 


 

Insgesamt waren schon 672926 Besucher (2503174 Hits) hier!
#Impressum | Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden