XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Positionieren und kacheln eines Hintergrundbildes (http://xhtmlforum.de/showthread.php?t=66388)

mimii 13.12.2011 14:59

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>

Ich möchte, dass das blaue Hintergrundbild (10x10px) nicht nur auf der x-Achse, sondern auch auf der y-Achse kachelt. Aber erst ab den 20em nach unten.
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?

hereandnow 13.12.2011 15:13

du musst deine background-eigenschaften auf "p.unten" setzen...

fricca 13.12.2011 15:28

Zitat:

Zitat von mimii (Beitrag 507294)
Ich möchte, dass das blaue Hintergrundbild (10x10px) nicht nur auf der x-Achse, sondern auch auf der y-Achse kachelt. Aber erst ab den 20em nach unten.

Das geht nicht. Wenn gekachelt wird, dann immer über die gesamte Fläche.
Man kann aber Bereiche mit anderen Elementen verdecken, damit es so aussieht, als ob.
Zitat:

Mit fixen Angaben in Pixel wäre das kein Problem,
Ja? Dann zeig bitte ein solches Beispiel, damit man sich vorstellen kann, was du eigentlich meinst. Ich weiß es ehrlich gesagt nicht.
Zitat:

aber ich erstelle ein elastisches Layout, in dem alle Größen in em notiert.
Für mich ist nicht nachvollziehbar, was das werden soll. Welcher Sinn liegt darin, einen Footer immer 20em von oben zu positionieren? Was soll dazwichen passieren? Und was soll passieren, wenn die Inhalte mehr Platz als 20em benötigen?

mimii 13.12.2011 18:39

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

fricca 13.12.2011 19:01

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.

mimii 13.12.2011 19:15

Hi nochmal,

na das ging ja schnell mit der Antwort. Vielen Dank erst Mal :)
Sorry, dass ich mich zunächst nicht so klar ausgedrückt habe.

Zu "Oben". Eigentlich ist nur der Pylon und das linke Log ein Bild. Alles Andere ist Schrift. Btw vielleicht hat jemand noch ne Ahnung warum in Chrome die über Googel Fonts eingebundene Schrift so pixelig ist? Aber das nur am Rande ;)

Code umstellen *hmmm* wäre machbar. Wie denkst du?
Zweiteilen? Bereich oben (weiß) und unten (blau) und dann jeweils einen Container mit den Breitenangaben (mit class). Ähnlich wie bei YAML?

Gruß
Steffi

fricca 13.12.2011 19:31

Zitat:

Zitat von mimii (Beitrag 507356)
Zu "Oben". Eigentlich ist nur der Pylon und das linke Log ein Bild. Alles Andere ist Schrift.

Soo viel anderes sehe ich da nicht.
Bildgrößen, Abstände und Headerhöhe in Pixel wären durchaus machbar. ohne dass großartig etwas bei Schriftvergrößerung zerbricht.
Zitat:

Btw vielleicht hat jemand noch ne Ahnung warum in Chrome die über Googel Fonts eingebundene Schrift so pixelig ist?
Kann ich nicht nachvollziehen. Welches System? Welche Browser im Vergleich?

Zitat:

Code umstellen *hmmm* wäre machbar. Wie denkst du?
Zweiteilen? Bereich oben (weiß) und unten (blau) und dann jeweils einen Container mit den Breitenangaben (mit class).
Ja, sowas in der Art.
Zitat:

Ähnlich wie bei YAML?
:?:
Ich kenne YAML nur als Framework für Spaltenlayouts. Ich verstehe deinen Gedankengang nicht.

mimii 13.12.2011 19:53

Und nochmal :)

Zitat:

Zitat von fricca (Beitrag 507357)
Soo viel anderes sehe ich da nicht.
Bildgrößen, Abstände und Headerhöhe in Pixel wären durchaus machbar. ohne dass großartig etwas bei Schriftvergrößerung zerbricht.

Ok, die Idee nehme ich gern auf, vielleicht erstelle ich den Schriftzug dann doch als Grafik.

Zitat:

Zitat von fricca (Beitrag 507357)
Welches System? Welche Browser im Vergleich?

Win XP, Crome 10
Hier ein Vergleich
Chrome 10
http://www.it-schoemehl.de/test/af_chrome.jpg
FF 8
http://www.it-schoemehl.de/test/af_ff.jpg

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

fricca 13.12.2011 20:05

Chrome 10? Aktualisieren wäre ein erster Ansatz.
Der Unterschied ist bei mir im aktuellen Chrome unter XP nicht erkennbar.

mimii 13.12.2011 20:37

Kurze Meldung:
Chrome16 -> keine Verbesserung.

Am besten mache ich den Schrifzug als Grafik

Danke und viele Grüße
mimii


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:07 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2022, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2022