Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: Hintergrundbild bleibt wo es ist in CSS



Ranking: +2   Kommentare: 2   |   Bewertung: Keine Berechtigung!  

Vorwort


Das ist wirklich ein leichtes tutorial damit das Hintergrundbild sich beim scrollen NICHT mitbewegt

Schritt 1


so als erstes müssen wir (wie immer) das Grundgerüst scripten das ist ganz einfach:

<html>
<head>
<title>LEISTENTITEL</title>
</head>
<body bgcolor="white" text="black" link="black" alink="black" hlink="black" vlink="black">

blablabla...
</body>
</html>

ich weiss man kann es im <body> Tag auch anders schreiben, das will ich euch nicht vorbehalten:

<html>
<head>
<title>LEISTENTITEL</title>
</head>
<body bgcolor="#ffffff" text="#000000" link="#000000" alink="#000000" hlink="#000000" vlink="#000000">

blablabla...
</body>
</html>

Einweisung:

Wie viele von euch sicher mitbekommen haben, kann man die Farben auch in s.g. Farbencodes schreiben. Hier ist beispielsweise die Farbe weiss #ffffff und die Farbe schwarz #000000

Die Farbenerstellung mit solchen zahlen ist nochmals ein Kapitel für sich...

Schritt 2


ok nun der eigentliche CSS code im <head> Tag:

<html>
<head>
<title>LEISTENTITEL</title>
<style type="text/css">
body
{
background-image:url(BILD);
background-repeat:no-repeat;
background-attachment:fixed;
padding:0px;
}
div.mybody
{
margin-left:100px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
}
</style>
</head>
<body>
blablabla
</body>
</html>

Erläuterung:

als Erstes muss schließlich ein bild ausgewählt werden. Dazu dient der Befehl
background-image:url(BILD);
der "no-repeat" befehl dient dazu, dass das Bild dort bleibt wo es ist und nicht beim scrollen endlos wiederholt wird.
Die margin-.... Befehle dienen nur für den Abstand zum Seitenanfang links, rechts, oben und unten. Diese müssen nicht miteingebunden werden, wären aber manchmal recht hilfreich.

Das ganze kann man sich ansehen auf der Seite www.frightnight.de.tt dort ist auf jeder Seite genau dieser Quelltext.

Viel Spass beim probieren :)



Veröffentlicht von: deleted_1287178837
Veröffentlicht am: 28 Feb. 2005
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter:

Kommentar(e) (2)


Hellracer sagt:

hi.
danke fürs tut.
wusste das zwar eigentlich vorher auch schon, jedoch auf eine andere art und weise.
auf jedenfall weiß ich halt nun für was: "background-repeat:no-repeat;" ist.

danke

12 Jan. 2006 20:26:22 • Antworten


sonYx sagt:

lange gesucht endlich gefunden :D
echt spitze... big tHx

1 Sep. 2005 14:16:13 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder