zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Positionieren und kacheln eines Hintergrundbildes

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2011, 14:59
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2011, 15:13
Benutzer
neuer user
 
Registriert seit: 14.10.2011
Beiträge: 32
hereandnow befindet sich auf einem aufstrebenden Ast
Standard

du musst deine background-eigenschaften auf "p.unten" setzen...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2011, 15:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
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?
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2011, 18:39
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2011, 19:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2011, 19:15
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2011, 19:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2011, 19:53
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Und nochmal

Zitat:
Zitat von fricca Beitrag anzeigen
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 anzeigen
Welches System? Welche Browser im Vergleich?
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
Mit Zitat antworten
  #9 (permalink)  
Alt 13.12.2011, 20:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Chrome 10? Aktualisieren wäre ein erster Ansatz.
Der Unterschied ist bei mir im aktuellen Chrome unter XP nicht erkennbar.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.12.2011, 20:37
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Kurze Meldung:
Chrome16 -> keine Verbesserung.

Am besten mache ich den Schrifzug als Grafik

Danke und viele Grüße
mimii
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
2 DIVS richtig positionieren Pari CSS 0 13.06.2009 20:22
horizontale richtung beim kacheln eines bg-pics weserweb CSS 5 28.12.2008 20:47
Relatives Positionieren von Elementen zu beliebigen anderen Elementen im Dokument dimension CSS 1 25.07.2008 13:49
Bild absolut positionieren (bottom) ZuMe CSS 2 03.07.2008 08:14
list-style-image vertikal positionieren? derdiedas CSS 2 05.03.2007 14:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:08 Uhr.