|
||||
Positionieren und kacheln eines Hintergrundbildes
Hallo ins Forum,
ich habe zum testen mal folgende kurze HTML Datei gemacht HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Background</title> <style type="text/css"> body { background-color: #c8c8c8; background-image: url(bgBody.jpg); background-position:0 20em; background-repeat:repeat-x; } p.unten { position:absolute; top:20em; left:0px; margin:0; padding:0;} </style> </head> <body> <h1>Test background-position</h1> <p>Hier sollte der Hintergund eigentlich noch grau sein</p> <p class="unten">--------- Hier soll der blaue Hintergund anfangen und nach unten weiter gehen ----------</p> </body> </html> Mit fixen Angaben in Pixel wäre das kein Problem, aber ich erstelle ein elastisches Layout, in dem alle Größen in em notiert. Ein einfaches background: repeat kachelt leider auch nach oben. CSS 3 background-size möchte ich aktuell noch nicht einsetzen. Das Beispiel ist hier online Hat jemand ne Idee, wie ich das realisieren kann? |
Sponsored Links |
|
|||
Zitat:
Man kann aber Bereiche mit anderen Elementen verdecken, damit es so aussieht, als ob. Zitat:
Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Hallo nochmal,
hier die Pixellösung. Ganz einfach der Hintergrund blau und oben ein 200 Pixel hoches und mit repeat-x gekacheltes Bild. Am besten zu sehen ist es wohl auf auf der Seite, die ich gerade entwickle. Hier könnt ihr gucken. Wechselt den Style auf Layout 3. Hier sieht man wie es gedacht ist (am besten den aktuellen Firefox benutzen). Ich habe es zur Zeit mit background-size (für den oberen weißen Hintergrund) gemacht, aber wie gesagt, das wollte ich nicht einsetzen. Viele Grüße Steffi |
|
|||
Aha, so wird das klarer. Deine Gedankengänge bzw. die Zusammenhänge waren oben leider nicht verständlich (denn auch pixelbasierend ändert sich das Verhalten gekachelter Hintergründe nicht.)
Wenn du nichts an der Dokumentstruktur ändern willst: Ein sehr hohes, schmales blaues Bild erstellen. Von oben passend positionieren, horizontal kacheln. Ich kann jedoch nicht nachvollziehen, warum der obere Bereich, der nur aus Bildern besteht, unbedingt schriftgrößenabhängige Höhen braucht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Zitat:
Bildgrößen, Abstände und Headerhöhe in Pixel wären durchaus machbar. ohne dass großartig etwas bei Schriftvergrößerung zerbricht. Zitat:
Zitat:
Zitat:
Ich kenne YAML nur als Framework für Spaltenlayouts. Ich verstehe deinen Gedankengang nicht.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
||||
Und nochmal
Zitat:
Win XP, Crome 10 Hier ein Vergleich Chrome 10 FF 8 Vielen Dank an dieser Stelle für deine kompetente Hilfe! So und nun müssen die Kids ins Bett, ich bastel später weiter. CSS macht richtig Laune http://xhtmlforum.de/images/smilies/icon_lol.gif Gruß - mimii p.s. Anregungen und konstruktive Kritik zu der Seite nehme ich gerne entgegen |
|
|||
Chrome 10? Aktualisieren wäre ein erster Ansatz.
Der Unterschied ist bei mir im aktuellen Chrome unter XP nicht erkennbar.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
2 DIVS richtig positionieren | Pari | CSS | 0 | 13.06.2009 21:22 |
horizontale richtung beim kacheln eines bg-pics | weserweb | CSS | 5 | 28.12.2008 21:47 |
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument | dimension | CSS | 1 | 25.07.2008 14:49 |
Bild absolut positionieren (bottom) | ZuMe | CSS | 2 | 03.07.2008 09:14 |
list-style-image vertikal positionieren? | derdiedas | CSS | 2 | 05.03.2007 15:11 |