Background
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 ungefähr so aus:
Deshalb 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:
Code: body {background-image:url(Bild-Link);}
Wir können aber auch unser Hintergrundbild festsetzen - dabei sollte das Bild so groß sein, wie die Seite - dann setzen wir es fest, das heißt - wenn wir die Seite runterscrollen bleibt der Hintergrund stehen - die Erweiterung unseres Hintergrund-Codes ist rot gekennzeichnet:
Code: body{background-image: url(Bild-Link);background-attachment: fixed;}
Jetzt sehen wir aber noch sehr wenig von unserem Hintergrundbild, weil es von verschiedenen 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:
Code:
td.edit_below_nav{visibility: hidden;width: 0px;}
Code: td.edit_navi_headbg{background-image: url(url);}
Jetzt ist unter dem Textteil - dem Content der schwarze Hintergrund - mit diesem Befehl ist er weg:
Code: td.edit_rechts_cbg{background-image: url(URL);}
Jetzt beseitigen wir den schwarzen Hintergrund hinter den Boxen:
Code: td.edit_rechts_bottom{background-image: url(url);}
Jetzt bleibt rechts noch ein schwarzer vertikaler Streifen - um den zu entfernen nehmen wir diesen Befehl:
Code: 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 Homepage schon richtig was her. ______________ Ciao Michael
Wenn man keine Ahnung hat, einfach mal fragen!
   
   
No Support via PN, E-Mail or Messenger - only here : FORUM
Zuletzt bearbeitet von success4you am 18.12.2011, 16:35, insgesamt einmal bearbeitet
|
