>> Topbalken über ganze seite ziehen

Hi,

klar geht das - mit CSS. ~> Google

Hi,

versuch es mal mit Verallgemeinerungen. css grafiken bildschirmbreite liefert mir auf der ersten Seite schon ein perfektes ergebnis mit entsprechender Demo.

Im Grunde solltest du dich mit Ebenen vertraut machen. Gerade bei der von dir gezeigten Grafik ist das relativ simpel durch repeat-Füllgrafiken zu lösen :slight_smile:

Hi,

also bei mir ist es das 4. Ergebnis - da wird das alles bestens erklärt.
ohne-css.gehts-gar.net/0029.php

Hi,

du musst natürlich auch ein bisschen verstehen was das ding mit deiner Seite anstellt. Einfaxhes Kopieren und Einfügen hilft selten. Der von dir gepostete Quelltext ist ja völlig unbearbeitet.

Du solltest dir dringend mal anschauen was denn da alles festgelegt ist und was du noch einstellen musst. Alleine schon durch die Eingaben, die im Quelltext stehen solltest du das erahnen können.

Hi,

gucken wir uns doch einfach mal das ganze Teil an:

<style type="text/css"> #header_links { background-image: url(leftpng.png); background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: 1; width: 549px; height: 150px; } </style>
Was kannst du diesem Block alles entnehmen?

  1. Es handelt sich um Style-Anweisungen im CSS-Format
  2. Der Kommentar #header_links lässt erahnen für was genau hier etwas festgelegt wird
  3. Bei background-image handelt es sich wohl um eine Grafik die dargestellt werden soll
  4. background-repeat besagt hier, dass eine Wiederholung der Grafik nicht erwünscht ist.
  5. width & high geben wohl die Maße der Grafik an

Den Rest lassen wir mal außen vor. So. Du hast jetzt ein Bild, das mit diesem Code-Fetzen verwendet werden soll. Was musst du also ändern um dem Browser anzuweisen deine Grafik nach diesem Schema zu verwenden?

Kleine Korrektur: Es handelt sich um die Größe des Elements, welches in diesem Fall keine Grafik ist, sondern ein DIV Container.

Blafasel,

es war schon spät :ps: Was aber trotzdem unerheblich ist solange er nicht mal versteht, dass er die leftpng evtl mit dem Namen seiner Grafik ersetzen sollte…

Hallo,

Habe ähnliches Problem.
Wenn der “Topbalken” einfärbig ist funkt dieses Beispiel. Aber welche Möglichkeiten gibt es, wenn man Beispielsweise eine Landschaft (Gebirgszug etc.) hat? Da gib es ja nichts was sich wiederholen könnte.

Geduldig auf Anwort wartende Grüsse
Retzer

Hallo Retzer

Probiere es mal hier mit:#bild { overflow: hidden; margin-right: auto; margin-left: auto; width: 100%; } #bild img { width: 100%; }

<div id="bild"><img alt="Landschaft" src="bild.jpg" /></div>

Gruß
Camou !coffee

Hallo Camou

Danke für die rasche Antwort, werd es gleich probieren.

lg, Retzer

Gibt schon Landschaftsbilder, die man horizontal sinnvoll
wiederholen kann, das sind 360Grad-Panoramabilder.
Wenn man da zudem noch ein Bild nimmt, welches schon mal
eine relativ große horizontale Ausdehnung hat (1600 Pixel oder
mehr), wird sich das Bild in der Praxis auch nicht so oft
wiederholen.

Eine andere Möglichkeit besteht darin, das Bild links und rechts
ineinander verlaufen zu lassen oder aber auch in eine einzige
Farbe. Letzteres täte man dann eher zentrieren, so daß man den
einfarbigen Rand nur bei sehr großen Anzeigebereichen zu
sehen bekommt.

Das Skalieren wie vorgeschlagen ist von der Qualität her oft
nicht optimal, kann bei relativ großen JPEGs mit niedriger
Kompressionsrate eine ganze Weile gutgehen, bevor die
Auflösungsprobleme deutlich sichtbar werden.
Wenn die browser das Aspektverhältnis alle korrekt wiedergeben
sollen, sollte man jedenfalls für img noch 'height: auto’
hinzufügen.
Anders als bei dem vorherigen Beispiel handelt es sich bei
letzterem auch nicht mehr um ein Hintergrundbild, da müßte man
dann bei CSS2 hinsichtlich der Skalierbarkeit das Bild in ein SVG
einbetten und dies als Hintergrundbild verwenden.