SchreibMalWas

Hintergrundbilder

" Eine sehr häufig in CSS verwendete Möglichkeit, Muster und Bilder als Hintergrundgestaltung zu verwenden, ist die CSS-eigenschaft background-image 

Beispiel:
dieser Text in diesem Div-element hat
ein Hintergrundbild mit den Standardeinstellungen ihres Browsers
Quellcode:
<div id="hintergrund">dieser Text in diesem Div-element hat<br>
ein Hintergrundbild mit den Standardeinstellungen ihres Browsers</div>
<style type="text/css">
<!--
#hintergrund{
background-image:url(https://img.webme.com/pic/s/schreibmalwas/beispiel-hintergrund.jpg); 
}
-->
</style>
Mit diesem Code wird das Element mit der ID="hintergrund" mit dem Hintergrund https://img.webme.com/pic/s/schreibmalwas/beispiel-hintergrund.jpg versehen. (Sie können auch andere Grafiken verwenden.)
Standardmäßig wiederholt sich das Hintergrundbild in alle Richtungen

Sie können Ihr Hintergrund auch auf den Hintergrund der kompletten Webseite projezieren:
nutzen Sie Hierzu folgenden Code:
Quellcode:
<style type="text/css">
<!--
body{
width:100%; height:100% margin:0; padding:0;
background-image:url(https://img.webme.com/pic/s/schreibmalwas/beispiel-hintergrund.jpg); 
}
-->
</style>
Dieser CSS-code lässt das Hintergrundbild über den Hintergrund der kompletten Seite erscheinen.
Um unschöne weise Rahmen zu vermeiden, wird der body-bereich auf 100% Breite und Höhe gestreckt. Gleichzeitig werden der Außen-, sowie Innenabstand auf 0px minimiert.


Nun geht es an's Eingemachte:
Im folgenden finden Sie Möglichkeiten, die Eigenschaften des Hintergrundbildes zu verändern:
Sie können diese Codeschnippsel einfach zwischen { und } nach dem restlichen Code hinzufügen.

Haben Sie z.b. ein Hintergrundbild für alle Ellemente einer Class festgelegt, so können Sie einzelne Elemente mit
background-image:none;
von diesem Hintergrundbild ausnehmen. Dies funktioniert auch bei Farbverläufen.

background-position:30px 50%;
Positioniert das Hintergrundbild mit 30px von Links und 50% von oben. Verwenden Sie diese Eigenschaft am Besten zuammen mit :no-repeat
Block mit postitioniertem Hintergrund
 
Info: mit background-position:center; wird das Hintergrundbild mittig plaziert.

background-repeat:no-repeat;
Verhindert, dass sich das Hintergrundbild Wiederholt
Block ohne Wiederholenden Hintergrund
 
Sie können auch nur in bestimte Richtungen Wiederholen:
background-repeat:no-repeat-x;
background-repeat:no-repeat-y;
So können Sie bestimmen, dass sich das Hintergrund nur Horizontal (repeat-x)
oder Vertikal (repeat-y) ausbreitet.

background-size: 100%; -ms-background-size: 100%; -moz-background-size: 100%; -webkit-background-size: 100%; -o-background-size: 100%;
Streckt das Hintergrundbild auf 100% Bildschrimbreite. Hierzu müssen die verschiedenen Browser alle einzeln angesprochen werden.
Dieser Hintergrund ist 20% breit und wiederholt sich
Sie können auch breite und Höhe angeben:
background-size:80px 60px; ...

Die Eigenschaft
background-attachment:fixed;
Fixiert das Hintergund, so dass es beim Scrollen nicht mit mit scrollt. Siesen Effekt sehen Sie auf allen schreibmalwas-seiten, wenn Sie auf den Seitenhintergrund achten.
verwenden Sie die Eigenschaft background-attachment:local; so scrollt der Hintergrund mit dem Inhalt de  jeweiligen Elementes mit.
Und mit background-attachment:scroll; können Sie dem Browser befehlen, den Hintergrund mit zu scrollen.

Seit CSS3 giebt es die Eigenschaft background-clip. Sie dient dazu, zu bestimmen, wie weit der Hintergrund geht.
Standardmäßig geht der Hintergrund bis unter den Rahmen. Dies entspricht dem Wert background-clip:border-box;
Sie können den Hintergrund aber auch mit der Eigenschaft background-clip:padding-box; direkt vor dem Rahmen stoppen lassen.
Wenn Sie eine Box mit Innenabstand haben, so können Sie auch nur den eigentlichen Text mit background-clip:content-box; mit einem bestimmten Hintergrund versehen und den Rest der Boxmit dem Außenabstand verschonen.
Beispiel:
Hier wird nur
der Inhalt eingefärbt.
Mehr nicht!!!
code:
<div id="hintergrund7">Hier wird nur<br>der Inhalt eingefärbt.<br>Mehr nicht!!!</div>
<style type="text/css"><!--
#hintergrund7{
padding:50px;
background-clip:content-box;
background-image:url(https://img.webme.com/pic/s/schreibmalwas/beispiel-hintergrund.jpg); 
}
--></style>


... Zum Schluss zeige ich Ihnen noch, wie Sie z.b. ein gestrecktes, nicht mitscrollendes Hintergrundbild auf Ihre Homepage bekommen, so wie Sie es hier auf schreibmalwas antreffen können:
Quellcode:
<style type="text/css">
<!--
body{
width:100%; height:100% margin:0; padding:0;
background-image:url(http://schreibmalwas.111mb.de/system/bilder/hintergrund.jpg);
background-position:center;
background-repeat:no-repeat
background-attachment:fixed;
background-size: 100%;
  -ms-background-size: 100%;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  -o-background-size: 100%;

}
--> </style>
Der Quelltext sollte auch ohne Erklärung verständlich sein.

Viel Spaß beim Tüfteln!!!






Kommentare zu dieser Seite:
Kommentar von ???????? ??, 30.12.2013 um 00:34 (UTC):
provides that will take wins, the main to always be unbundled in various locations, Male, Liu outdated individual, after which a good blink of each total eye.
<a href="http://www.pec11okt.com.mk/_documentation.html" title="???????? ??">???????? ??</a>

Kommentar von ????? ????? ???, 27.12.2013 um 14:52 (UTC):
I found your blog site on google and check a couple of of your early posts. Continue to maintain up the excellent operate. I simply extra up your RSS feed to my MSN Information Reader. Searching for forward to studying extra from you later on!?
<a href="http://www.mikvehminder.com/?????.html" title="????? ?? ">????? ?? </a>

Kommentar von ???????????, 26.12.2013 um 01:21 (UTC):
I precisely needed to thank you very much yet again. I am not sure what I would have handled in the absence of those pointers shared by you concerning that theme. It previously was the fearsome circumstance in my view, however , spending time with a specialised manner you treated the issue forced me to cry for contentment. Now i am thankful for the work and even have high hopes you are aware of a powerful job you are undertaking educating many others thru your website. I'm certain you haven't got to know all of us.
??????????? http://www.losarrudos.com/thenorthface.html

Kommentar von ????? ?????, 25.12.2013 um 22:37 (UTC):
Boom following a thrashing surge.<br> estuary yelled: In which Villains, and this a complete 35 {toes|little feet|ft|ft . Of which tough tastes little by little displayed available, THAT I are not aware of Soft reddish colored setting sun thrown a major mountain / hill, in which volcano.
????? ?? http://www.rmrf.com/external/_external.php

Kommentar von ??????? ????, 23.12.2013 um 18:57 (UTC):
I truly wanted to jot down a brief word so as to thank you for the remarkable facts you are giving out at this site. My time intensive internet investigation has at the end been compensated with beneficial insight to share with my visitors. I would declare that many of us website visitors are unquestionably fortunate to live in a perfect community with very many outstanding individuals with beneficial pointers. I feel extremely privileged to have used your webpage and look forward to really more brilliant times reading here. Thanks once more for everything.
??????? ? http://www.losarrudos.com/thenorthface.html



Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre Homepage:
Ihre Nachricht:

Sie sind der 27682 Besucher auf Schreibmalwas-homepagetools Statistiken
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
"