Wie füge ich einen Hintergrund ein und wie fixiere ich ihn? |
Waunca
eidg. dipl. Gfrörli
Dabei seit: 11.07.2005
Beiträge: 665
Herkunft: Schweiz
|
|
Wie füge ich einen Hintergrund ein und wie fixiere ich ihn? |
|
Um einen Hintergrund in eine Seite einzufügen schreibst du in den <body>-Tag: style="background-image:url('bildadresse.jpg');"
code: |
1:
|
<body style="background-image:url(bild.jpg);"> |
|
Man kann Hintergründe aber auch Tabellen, Textabsätzen, Divs usw. zuordnen, indem man das CSS-Style in den entsprechenden Tag (<table>, <p>, <h1>, <div> ... ) eingfügt.
Ist das Hintergrundbild kleiner als die Seite, wird sie standardmässig wiederholt, so dass die ganze Seite damit überdeckt ist. Man kann das aber auch verhindern, indem man background-repeat:no; bei style="..." einfügt. Du möchtest, dass sich das Hintergrundbild zwar wiederholt, aber nur von links nach rechts? Kein Problem, mit background-repeat:repeat-x; geht auch das. Genauso ist es möglich, ein Bild sich nur der Höhe nach wiederholen zu lassen: background-repeat:repeat-y; kommt dann in die style-Angabe.
code: |
1:
|
<body style="background-image:url(bild.jpg);background-repeat:repeat-y;"> |
|
Hier wird das Hintergrundbild nur in der Höhe wiederholt.
Man kann auch bestimmen, wo dieses Hintergrundbild positioniert werden soll. Das geht mit dem Attribut background-position. Schreibst du background-position:30px 20px; wird das Hintergrundbild 30 Pixel vom oberen Rand und 20 Pixel vom linken Rand entfernt positioniert. Möglich sind aber nicht nur Angaben in Pixeln sondern auch die üblichen allgemeinen Positionierungsangaben top (oben am Rand),center (horizontal zentriert), middle (vertikal mittig), bottom (am unteren Rand), left (am linken Rand) und right (rechtsbündig). Schreibst du also background-position:top right; wird das Hintergrundbild sich in der oberen rechten Ecke befinden.
code: |
1:
|
<body style="background-image:url(bild.jpg);background-repeat:repeat-y;background-position:left;"> |
|
Das Bild wiederholt sich in der Höhe und befindet sich am linken Seitenrand.
Wenn man ein Hintergrundbild auf einer Seite einbaut, auf der gescrollt werden muss, bewegt sich das Hintergrundbild beim Scrollen standardmässig mit der Schrift mit. Verhindern kann man das mit folgender CSS-Zeile: style="background-attachment:fixed;"
In unserem Fall sieht das im Quelltext dann so aus:
code: |
1:
|
<body style="background-image:url(bild.jpg);background-repeat:repeat-y;background-position:left;background-attachment:fixed;"> |
|
__________________
|
|
23.02.2005 21:54 |
|
|
Knuffelponylein
Mitglied
Dabei seit: 09.02.2005
Beiträge: 1.110
Herkunft: Bayern
|
|
der code mit dem desi einfügen also eibauen geht bei mir nich
__________________
|
|
28.02.2005 16:24 |
|
|
Waunca
eidg. dipl. Gfrörli
Dabei seit: 11.07.2005
Beiträge: 665
Herkunft: Schweiz
Themenstarter
|
|
Habs überarbeitet, jetzt ist es hoffentlich leichter verständlich.
__________________
|
|
14.03.2005 20:53 |
|
|
stina
Mitglied
Dabei seit: 12.02.2005
Beiträge: 575
|
|
|
18.07.2005 08:58 |
|
|
Shina
ding dong
Dabei seit: 08.02.2005
Beiträge: 1.020
Herkunft: hannover
|
|
Hast du folgenden Code eingegeben:
<body style="background-image:url(bild.jpg);background-repeat:no;"> ?
Dann müsste es eigentlich gehen.
__________________ Neopets
Hier kommt Kurt
|
|
18.07.2005 11:31 |
|
|
stina
Mitglied
Dabei seit: 12.02.2005
Beiträge: 575
|
|
|
18.07.2005 15:30 |
|
|
The Yellow
Fantasy-Freak
Dabei seit: 15.08.2005
Beiträge: 1.198
|
|
Wahrscheinlich geht es so:
__________________
|
|
11.12.2005 12:56 |
|
|
Zara
Valevska
Dabei seit: 13.01.2006
Beiträge: 383
|
|
Bei mir passier immer das
<body style="background-image:url('url%20(http:/home.arcor.de/gavain/geht.jpg)');background-repeat:no">
Und immer wenn ich es lösche kommts neu...
|
|
06.08.2006 21:51 |
|
|
Irrlicht
Und zu ist,wegen Spam!
Dabei seit: 16.04.2006
Beiträge: 3.023
Herkunft: Paderborn
|
|
Klasse Tut, hat sofort funktioniert
__________________
|
|
06.12.2006 16:54 |
|
|
Windy
heart skipped the beat.
Dabei seit: 29.03.2006
Beiträge: 2.180
|
|
stina: deine Bild-url funktioniert gar nicht!
|
|
06.12.2006 20:39 |
|
|
Julchen91
Mitglied
Dabei seit: 25.05.2006
Beiträge: 149
Herkunft: Nürnberg
|
|
Ich habe vor einer Weile ein Design gemacht und habe heute versucht es einzubauen.
Das ist das Design http://img134.imageshack.us/img134/6791/versuch3js6.jpg
Doch die rechte Seite (right) hat sich bei mir immer wiederholt. Dann habe ich die Designgröße geändert und hatte am Ende eine Breite von 2000 Px
Kann ich das auch vermeiden?
Ich muss das mit CSS mal probieren. Damit kenne ich mich bisher noch gar nicht aus.
__________________ Liebe Grüße
Julia
|
|
19.01.2007 13:35 |
|
|
Julchen91
Mitglied
Dabei seit: 25.05.2006
Beiträge: 149
Herkunft: Nürnberg
|
|
So, ich noch einmal.
Ich habe mal das Design hochgeladen. Zumindest die Startseite.
Das könnt ihr euch hier ansehen.
http://julchen91.ju.funpic.de/home.htm
Bei meiner Auflösung wiederholt sich die rechte Seite immer. Nun möchte ich das vermeiden, ebenso wie das Wiederholen nach unten bei anderer Auflösung und Einstellung. Wie stelle ich das an?
__________________ Liebe Grüße
Julia
|
|
21.01.2007 14:02 |
|
|
|
|
|
Impressum
|