Background-position

[zodd1982]

Hi
Ich erstelle gerade eine neue Website und bin auf folgendes Problem gestosen.

Ich möchte gerne in einen Layer ein Hintergrundbild einfügen, das ist soweit kein Problem.
Möchte aber das das Hintergrundbild erst nach 1000px (von oben) anfängt und sich von dort an wiederholt. So das im Layer sozusagen die ersten 1000px ohne Hintergrundbild sind.

Kann mir jemand wegen dem helfen bzw einen kleinen html Code posten wo ich die genaue Position festlegen kann wie oben erwähnt.

 

[XimeX]

vll hilft dir diese seite weiter: CSS4YOU (Background-Position)

 

[GabbaHansn]

ohne mehr code ist das wohl schwer für uns aber versuch mal einen div drumherum zu bauen und margin-left z.b.

 

[XimeX]

für was soll er ein margin-left machen?

 

[Wakanaka]

padding-top ?

Schau mal hier http://www.w3schools.com/

 

[bluescript]

Padding wirkt nicht auf den Background, so wirds also nicht funktionieren. Auch prinzipiell ist es nicht möglich bei aktivem Background-Repeat einen freien Bereich nach oben zu definieren. Background-position definiert lediglich die Startposition des Hintergrundbilds, gekachelt wird sowohl vertikal als auch horizontal in beide Richtungen.

Der einfachste Weg, den gewünschten Effekt trotzdem hinzubekommen, ist die Hintergrundgrafik von vornherein so anzupassen, dass die 1000px Rand oben bereits in der Grafik inkludiert sind. Wenn man dann noch die vertikale Kachelung antizipiert, d.h. sie hoch genug anlegt dass nicht gekachelt werden muss, kann man sie ohne repeat-y als Hintergrund für das DIV einbinden. Nachteil der Lösung ist, dass die Dateigröße entsprechend wächst - die tatsächliche Problematik dabei hängt aber natürlich vom Inhalt der Grafik ab.

Beispielcode: background: #(Hintergrundfarbe) url(Grafik) repeat-x left 1000px;

Solche Probleme werden erst dann einmal verschwinden, wenn es möglich ist, mehrere Backgrounds für ein Element zu definieren. Das is zwar geplant, aber soweit ich es aus dem Stegreif weiß noch nicht in CSS3 enthalten.

EDIT: die vorgeschlagene Lösung mittels DIV-Schachtelung und margin-top wird wahrscheinlich nicht funktionieren, weil im ersten DIV ja vermutlich Inhalt stehen soll. Der definierte Margin von 1000px des untergeordneten DIVs würde sich entsprechend immer am unteren Rand des Inhalts ausrichten und damit von dessen Länge abhängen. Andersrum kann man den Inhalt auch nicht in das untergeordnete DIV reinpacken, denn sonst ist ja der Inhalt um 1000px vertikal verschoben. Das könnte man dann zwar wieder mit negativen Margin-Definitionen korrigieren, aber sauber ist das auch nicht. Die vorgeschlagene Lösung mit der Hintergrundgrafik scheint mir wirklich die sauberste und einfachste zu sein.