Hintergrundbild festsetzen und positionieren
17 Beiträge • Seite 1 von 2 • 1, 2
Hintergrundbild festsetzen und positionieren
von CoolCasimir am 15.01.2005, 18:19
Um ein Hintergrundbild einer Webseite festzusetzen, benötigt man stylesheets.
Hier mal eine Demonstration wie soetwas aussehen könnte:
Einfach oben in den Header hinein.
Ich denke der Quelltext erklärt sich fast von selbst.
1.) Das Bild angeben
2.) Es soll sich nicht wiederholen
3.) Es ist festgesetzt, also scrollt nicht mit dem Text
4.) Die Position von oben links gesehen in Pixel.
Hier mal eine Demonstration wie soetwas aussehen könnte:
Einfach oben in den Header hinein.
- Code: Alles auswählen
<style>
background-image: url(bild.jpg);
background-repeat: no-repeat;
background-attachment:scroll;
background-position: 10px 10px;
</style>
Ich denke der Quelltext erklärt sich fast von selbst.
1.) Das Bild angeben
2.) Es soll sich nicht wiederholen
3.) Es ist festgesetzt, also scrollt nicht mit dem Text
4.) Die Position von oben links gesehen in Pixel.
- CoolCasimir
- Moderator
- Beiträge: 2194
- Registriert: 14.01.2004, 14:07
- Wohnort: Hansestadt Hamburg
und warum funzt dat bei mir nich??? 
von CoolCasimir am 30.05.2005, 15:49
Doch, das funzt... schau mal hier: http://www.informationsarchiv.net/foren ... 20138.html
- CoolCasimir
- Moderator
- Beiträge: 2194
- Registriert: 14.01.2004, 14:07
- Wohnort: Hansestadt Hamburg
von tuxianer am 22.04.2006, 13:41
ich habs jetzt rausgefunden!
ihr macht euch das alles viel zu kompliziert!
So funktioniert's:
PS: das stylesheet "background-repeat" gibt es nicht
ihr macht euch das alles viel zu kompliziert!
So funktioniert's:
- Code: Alles auswählen
<body background="bg.gif" style="background-attachment:fixed;">
PS: das stylesheet "background-repeat" gibt es nicht
- tuxianer
- Beiträge: 86
- Registriert: 18.03.2006, 15:56
- Wohnort: wherever i may roam
von dvdabo am 02.06.2006, 13:18
mal auch meinen senf dazugeb:
<style type="text/css">
body {
background-image:url('hintergrund.JPG');background-attachment:fixed; background-repeat:no-repeat; padding:0px; background-position:top center; }
</style>
meien lösung..
und das css gibts wohl
<style type="text/css">
body {
background-image:url('hintergrund.JPG');background-attachment:fixed; background-repeat:no-repeat; padding:0px; background-position:top center; }
</style>
meien lösung..
und das css gibts wohl
- dvdabo
- Beiträge: 42
- Registriert: 02.06.2006, 01:34
von a2p am 19.09.2006, 18:39
darf ich vllt noch anmerken: timbo, wenn du die seite hochlädst siehst nur du den hintergrund. da darf nur homepage.jpg stehen. du hast nen statischen link angegeben. alle browser suchen das bild auf deiner festplatte, und deine besucher haben halt mal nicht deine festplatte.
dann noch zu CoolCassimir:
du hast
geschrieben, aber
geschrieben. mit "scroll" scrollt der hintergrund mit dem text. du musst "fixed" verwenden
Die Datei "background.png" wird einmal angezeigt (no-repeat = keine wiederholung), fix angezeigt (fixed = feste position) und rechts oben angeheftet (right top). die farbe #008800 wird angezeigt, wenn die datei "background.png" nicht existiert oder erscheint da, wo das bild transparent ist.
das bild wird an der x-achse wiederholt und scrollt mit dem text und wird 5% von links nach rechts und 5 % von oben nach unten positioniert.
dann noch zu CoolCassimir:
du hast
3.) Es ist festgesetzt, also scrollt nicht mit dem Text
geschrieben, aber
- Code: Alles auswählen
background-attachment:scroll;
geschrieben. mit "scroll" scrollt der hintergrund mit dem text. du musst "fixed" verwenden
- Code: Alles auswählen
<style type="text/css">
<!--
background-color: #008800;
background-image: url(images/background.png);
background-repeat: no-repeat;
background-attachement: fixed;
background-position: right top;
-->
</style>
Die Datei "background.png" wird einmal angezeigt (no-repeat = keine wiederholung), fix angezeigt (fixed = feste position) und rechts oben angeheftet (right top). die farbe #008800 wird angezeigt, wenn die datei "background.png" nicht existiert oder erscheint da, wo das bild transparent ist.
- Code: Alles auswählen
<style type="text/css">
<!--
background-color: #008800;
background-image: url(images/background.png);
background-repeat: repeat-x;
background-attachement: scroll;
background-position: 5% 5%;
-->
</style>
das bild wird an der x-achse wiederholt und scrollt mit dem text und wird 5% von links nach rechts und 5 % von oben nach unten positioniert.
- a2p
- Beiträge: 83
- Registriert: 09.09.2006, 18:59
script
von 123timbo am 19.09.2006, 18:57
statischen link angegeben
sorry! das ist wohl richtig!
das kommt aber daher, dass alle dateien relativ zur seitenurl stehen.
das heißt, dass alle homepage dateien auf meiner festplatte, sowie auf dem server gleich angeordnet sind!
TimBO
- 123timbo
- Beiträge: 28
- Registriert: 15.09.2006, 17:31
von RedPapaBull am 03.06.2007, 11:25
Also irgenwie funktioniert das bei mir nicht:
Auf meinem Rechner funktioniert es zwar aber auch nicht ganz, da habe ich links und rechts einen Weißen Rand und auf dem Server sehe ich nur eine leere Seite.
Oder habe ich irgenwas falsch gemacht?
- Code: Alles auswählen
<style type="text/css">
body { background: #FaFaFa url(back.jpg) center no-repeat width 100%}
</style>
Auf meinem Rechner funktioniert es zwar aber auch nicht ganz, da habe ich links und rechts einen Weißen Rand und auf dem Server sehe ich nur eine leere Seite.
Oder habe ich irgenwas falsch gemacht?
- RedPapaBull
- Beiträge: 97
- Registriert: 14.12.2005, 22:59
- Wohnort: HoyWoyCity
von dragonl am 03.06.2007, 12:28
RedPapaBull hat geschrieben:Oder habe ich irgendwas falsch gemacht ?
Jup, hast du ^^
Schau dir mal das hier an: http://www.css4you.de/background.html.
Du hast 1. deine Eigenschaften in der falschen Reihenfolge angegeben und
2. versucht es mit weiteren Eigenschaften zu erweitern.
Probiere mal:
- Code: Alles auswählen
<style type="text/css">
body{ background: #FaFaFa url(back.jpg) scroll no-repeat center;
width: 100%;
}
</style>
Ich persönlich habe es lieber wenn ich die Eigenschaften einzelnd angebe, so wie in dem Statpost.
MfG
Dragonl
- dragonl
- Beiträge: 372
- Registriert: 14.09.2004, 14:10
- Wohnort: Bremen
17 Beiträge • Seite 1 von 2 • 1, 2
Ähnliche Themen
| 4 Bilder fest positionieren Forum: HTML, PHP & Co. Autor: dragonl Antworten: 4 |
Word/Bild einfügen/Schrift positionieren Forum: Software-Hilfe Autor: Stefan712 Antworten: 2 |
Hintergrundbild Forum: Software-Hilfe Autor: DickerEsel Antworten: 2 |
Hintergrundbild Forum: Webmaster-Anfänger Autor: theraider Antworten: 2 |
Css Hintergrundbild Forum: HTML, PHP & Co. Autor: pow3rd_by_M4X Antworten: 4 |
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste