[HTML] Wie füge ich einen Hintergrund ein und wie fixiere ich ihn?

Waunca

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;">

Knuffelponylein

der code mit dem desi einfügen also eibauen geht bei mir nich

Waunca

Habs überarbeitet, jetzt ist es hoffentlich leichter verständlich. Augenzwinkern

stina

wiso geht es nicht das der hg sich nicht widerholt???

www.mutschinskide./zucht/Zuchthegste/ Anderlusier da schaut bitte mal!

stina

http://www.mutschinski.de/Home2/Zucht/zu...nderlusier.html

so jetzt geht die addy hoffentlich! wiso geht es nicht??

Shina

Hast du folgenden Code eingegeben:
<body style="background-image:url(bild.jpg);background-repeat:no;"> ?

Dann müsste es eigentlich gehen.

stina

<body style="background-image:url (http://www.bilderhierzu.de/Unbenannt1/34....jpg;background)-repeat:no;">

das gebe ich ein!

ilovehorses

Muss man das: style="background-image:url('bildadresse.jpg');" MIT oder OHNE die Klammern schreiben????

LG Isa

The Yellow

Zitat:

Original von stina
<body style="background-image:url (http://www.bilderhierzu.de/Unbenannt1/34....jpg;background)-repeat:no;">

das gebe ich ein!

Wahrscheinlich geht es so:

Zitat:

Lawina

Sabrina

Wo soll man das denn einfügen? Bei Designvorlage oder eigenes Design oder auf der betreffenden Seite? Weil wenn ich es einfüge, ist gar kein HG mehr... unglücklich

Zara

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...

Irrlicht

Klasse Tut, hat sofort funktioniert fröhlich

Windy

stina: deine Bild-url funktioniert gar nicht!

Julchen91

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.

Julchen91

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?

banni

Super tut, nur wie kriege ich die Frames rein? Ich habe ein anderes Tut gefunden, nur das ist wieder ein anderer befehl für den hintergrund (mit divs). ich würde ihn gern so wie du machen, aber wie baue ich dann die frames ein? das hintergrundbild soll fixiert sein, und zwar für alle seiten. soll ich das in den css code stellen, den hintergrund? verwirrt

edit: muss der Code (background-dings) wirklich in den bodytag? In einem ganz normalen html sheet? Weil bei mir lehnt er den code in dem Tag ab. (macromedia dreamweaver).

Ade

Wah

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<html>
<head>
<title>Stratessa's Seite - Home</title>
<meta name="author" content="Ade">
</head>
<body text="#674625" bgcolor="#BE8347" link="#674625" alink="#674625" vlink="#674625">
      <topmargin="240"
leftmargin="400">
     <body style="background-image:url(http://img217.imageshack.us/img217/9434/designlx6.png);background-repeat:no;">
       <font><font size="3"><font face="Arial Narrow">Bla Bla Bla :)</font>
</body>
</html>

Es klappt nicht unglücklich

[Elite-|-Killer]

_________________

Ade

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:

<html>
<head>
<title>Stratessa's Seite - Home</title>
<meta name="author" content="Ade">
</head>
<body text="#674625" bgcolor="#BE8347" link="#674625" alink="#674625" vlink="#674625">
      <topmargin="240">
<leftmargin="400">
     <body style="background-image:url(http://img217.imageshack.us/img217/9434/designlx6.png );background-repeat:no;">
       <font size="3"><font face="Arial Narrow">Bla Bla Bla :)</font>
<!-- Ad by funpic.de --><noscript><div style="display:none">&nbsp;</div></noscript><script type="text/javascript" src="http://media.funpic.de/layer.php?bid=39944907"></script><!-- End Ad by funpic.de --></body>

</html>

Mit dem Code klappt's nu'
Abgesehen davon, dass die Schrift nicht da ist, wo sie hinsoll...

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH