Background-Position

[John__Dorian]

Hallo,
ich möchte einem background-image zuweisen, dass es nicht zu Beginn des Elementes angezeigt wird, sondern erst nach einer gewissen Anzahl von Pixeln, danach soll es sich wiederholen. Bei dem Element handelt es sich um ein <td>

Hier der mein CSS-Code:

  
background: url(../img/styles/standard/box_mid.png);  
color:#242424;  
background-position:0px 399px;  
padding:10px;  

Das Problem ist, dass das Bild trotzdem schon oben im Element angezeigt wird.
Ich hoffe ihr könnt mir helfen.
mfG
J.D.

[ChrisB]

Hi,

ich möchte einem background-image zuweisen, dass es nicht zu Beginn des Elementes angezeigt wird, sondern erst nach einer gewissen Anzahl von Pixeln, danach soll es sich wiederholen.

Das geht mit den Möglichkeiten von CSS 2.1 nicht.
Wenn Wiederholung - dann in beide Richtungen der jeweligen Achse.

Bei dem Element handelt es sich um ein <td>

Das Problem ist, dass das Bild trotzdem schon oben im Element angezeigt wird.

Dann schau, ob du das durch ein padding- oder border-top für TD irgendwie ausgleichen kannst.

MfG ChrisB

[John__Dorian]

Das geht mit den Möglichkeiten von CSS 2.1 nicht.
Wenn Wiederholung - dann in beide Richtungen der jeweligen Achse.

hm achso...

Dann schau, ob du das durch ein padding- oder border-top für TD irgendwie ausgleichen kannst.

da steht ja was drin in dem td... und wenn ich das nach unten verschieben würde mit padding, dann würde ja auch der inhalt nach unten rutschen, was nicht sein sollte.

ich hole mal etwas weiter aus, vielleicht hilft das zur lösung des problems.

ich möchte das hintergrundbild besteht aus drei teilen, einem kopfstück, welches 399px hoch ist und auf dem sich schon inhalt befinden soll, einem mittelstück, welches sich sooft wie nötig wiederholen soll (1px hoch), auf diesem soll der inhalt weiter gehen, und einem fußstück (15px hoch) auf welchem kein inhalt sein soll. fußstück kann man außenvor lassen, weil dies ja nun wirklich kein problem darstellt.

[ChrisB]

Hi,

ich möchte das hintergrundbild besteht aus drei teilen, einem kopfstück, welches 399px hoch ist und auf dem sich schon inhalt befinden soll, einem mittelstück, welches sich sooft wie nötig wiederholen soll (1px hoch), auf diesem soll der inhalt weiter gehen, und einem fußstück (15px hoch) auf welchem kein inhalt sein soll.

Na dann gib doch das „Kopfstück“ dem ersten Inhaltselement, das sich in der TD befindet, als Hintergrundbild.

Wenn dir das nicht machbar erscheint, dann beschreibe uns den Aufbau deiner HTML-Struktur genauer. Sei aber auf die Frage gefasst, warum du überhaupt mit einer Tabelle arbeitest.

MfG ChrisB

[John__Dorian]

Na dann gib doch das „Kopfstück“ dem ersten Inhaltselement, das sich in der TD befindet, als Hintergrundbild.

was?!

Wenn dir das nicht machbar erscheint, dann beschreibe uns den Aufbau deiner HTML-Struktur genauer.

  
<td class="content_mid">  <!-- das ist das "Hauptelement" - hat als Hintergrund das "Kopfteilbild"-->  
 <table border="0" cellpadding="0" cellspacing="0">  
  <tr>  
   <td class="content_middle"> <!-- das Element mit dem Seiteninhalt, es soll den Mittelteil des Hintergrundes enthalten, welcher sich soweit wiederholt, wie seiteninhalt da ist. -->  
    <!-- Seitenhinhalt -->  
   </td>  
  </tr>  
  <tr>  
   <td class="content_bottom">  <!-- der "Fußteil" -->  
     &nbsp;  
   </td>  
  </tr>  
 </table>  
</td>  

»»Sei aber auf die Frage gefasst, warum du überhaupt mit einer Tabelle arbeitest.

Ganz einfach, weil der Internet Explorer oftmals Probleme mit divs hat.
Ich selbst nutze Firefox, aber ich möchte, dass jeder die Seite verwenden kann.

mfG
J.D.

[ChrisB]

Hi,

Sei aber auf die Frage gefasst, warum du überhaupt mit einer Tabelle arbeitest.

Ganz einfach, weil der Internet Explorer oftmals Probleme mit divs hat.

Das ist, in dieser Pauschalität, Quatsch.

Vernünftig strukturierte CSS-Layouts lassen sich auch im IE in den allermeisten Fällen ohne allzu große Verrenkungen problemlos umsetzen.

MfG ChrisB

[John__Dorian]

Da sag ich jetzt mal nichts zu, macht mir einfach einen Vorschlag, wie ichs denn besser machen soll.

Danke,
J.D.

[ChrisB]

Hi,

Da sag ich jetzt mal nichts zu, macht mir einfach einen Vorschlag, wie ichs denn besser machen soll.

Lerne, mit HTML und CSS umzugehen, so dass du vernünftig strukturierte Dokumente erstellen kannst, die in allen modernen Browser wie gewünscht angezeigt werden.

Und dann informiere dich ggf. über die Probleme älterer IE-Versionen, und wie man diese umgehen/beheben kann - und welche Techniken dazu geeignet sind.

MfG ChrisB

[Gunnar Bittersmann]

@@John__Dorian:

nuqneH

mittelstück, welches sich sooft wie nötig wiederholen soll (1px hoch)

Ungünstig. 8px, 16px oder 32px wären eine gute Wahl. ↗Pixelgröße für kachelbare Hintergrundgrafik, insb. mein Beitrag.

fußstück (15px hoch)

Wenn das Hintergrundbild ein JPEG ist, sollte es 16px hoch sein (Länge und Breite sollten durch 8 teilbar sein). Bei GIF und PNG bin ich mir nicht sicher.

Qapla'

[Der Martin]

Hallo,

Wenn das Hintergrundbild ein JPEG ist, sollte es 16px hoch sein (Länge und Breite sollten durch 8 teilbar sein). Bei GIF und PNG bin ich mir nicht sicher.

bei GIF gibt es keine "Idealmaße".
Innerhalb der Rasterzeilen können aufgrund der LZW-Kompression unterschiedlich größe Abschnitte zusammengefasst sein, die Grenzen sind nicht vorhersehbar.
In y-Richtung werden keine Regelmäßigkeiten betrachtet, die Speicherung erfolgt rein zeilenweise. Die Höhe einer GIF-Grafik ist daher im Hinblick auf eine Optimierung auch egal (je geringer, je besser).

PNG kenne ich auch nicht gut genug, um das beurteilen zu können.

So long,
 Martin

[Gunnar Bittersmann]

@@John__Dorian:

nuqneH

Bei dem Element handelt es sich um ein <td>

Das sti^Wmüffelt.

Wie viele Spalten hat deine „Tabelle“? 1? Dann ist es mit eben dieser Wahrscheinlichkeit keine Tabelle.

Verwende passende HTML-Elemente! Handelt es sich bei der oberen Box um die Überschrift? HTML5 führt noch einige Elemente zur Seitenstrukturierung ein: header, section, article, footer u.a. [HTML5 §4.4]

Qapla'