Hintergrundbilder eindrucksvoll mit CSS skalieren

Wie skaliert ringvemedia.com eigentlich das Hintergrundbild? Ein drweb-Leser fragt und wir haben uns die Seite genauer angeschaut.

Formatfüllende Hintergrundbilder und moderne Browser sind natürliche Feinde. Nur selten gelingt die perfekte Positionierung der Bilder und wenn, kommen gängige Methoden nicht ohne Flash oder JavaScript aus. Mit den guten alten Tabellen aus vergangenen HTML-Zeiten gelingt jedoch die verblüffend einfache Illusion des perfekten Hintergrundbildes.

Wie es sich für echte Illusionen gehört, ist der Effekt beeindruckend und der Trick banal. Allen Anfang bildet ein günstig dimensioniertes Hintergrundbild, das später dynamisch um einige Prozent hochskaliert wird. In Hinsicht auf aktuelle Auflösungen habe ich ein schönes Stadtmotiv mit der Größe von 1024×768 Pixeln gewählt.


Unser Testbild im Browser

Das Hintergrundbild

Für den Effekt des dynamischen Hintergrundbildes wird das gewählte Motiv als ganz normales Bild eingefügt und von einer Tabelle und zwei Div-Elementen umrahmt. Die sonst als „böse“ verschriebene Tabelle macht – nicht ganz im Sinne der Erfinder – den Effekt erst möglich.

<div id="bg">
<div>
<table cellpadding="0" cellspacing="0">
<tr>eigenlt
<td>
<img alt="background" src="files/bg.jpg" />
</td>
</tr>
</table>
</div>
</div>

Die Konstruktion an sich wirkt sehr obskur, ermöglicht aber, dank der besonderen Eigenschaften der Tabellen in HTML, die besten Voraussetzungen für die spätere Positionierung. Die eigentliche Hexenküche verbirgt sich im CSS. Zunächst werden alle Elemente mit Ausnahme des Hintergrundbildes auf maximale Höhe und Breite gebracht. Ebenfalls muss der Überlauf der Elemente verborgen werden, da sonst unschöne weiße Bereiche zu sehen sind und Scrollbalken eingeblendet werden.

html,body,#bg,#bg table,#bg td,#content {
width:100%;
height:100%;
overflow:hidden;
}

Einmal die Konstanten hergestellt, muss nur noch das Bild auf die richtige Größe und Position gebracht werden. Dazu benötigen wir einen gewissen Rahmen außerhalb des sichtbaren Bereiches, in den das Bild bei nicht exakter Proportion des Browserfensters mit der Grafik hinein laufen kann. Dies wird durch doppelte Ausmaße des zweiten Div-Elements mit einer negativen Verschiebung nach links oben erreicht.

#bg div {
position:absolute;
width:200%;
height:200%;
top:-50%;
left:-50%;
}

Im letzen Schritt der großen Formatierung wird nun endlich das Hintergrundbild positioniert und skaliert. Der konstruierte Rahmen beträgt einheitlich 50% und das Bild muss nur gänzlich in die Mitte gebracht werden. Hier schlägt die Stunde der völlig zu Recht nur in notwendigen Maßen zu verwendenden Tabelle. So wird das Bild vertikal und über den Umweg der Textformatierung auch horizontal zentriert. Leider ist die Interpretation der Kniffs über die Textformatierung je nach Browser unterschiedlich. Um die maximale Kompatibilität zu erreichen, wird zusätzlich das Hintergrundbild noch mit automatischem Außenabstand zentriert. Als Block-Element nimmt das Bild automatisch die vollständige Breite ein und kann als schönes Hintergrundbild brillieren.

#bg td {
vertical-align:middle;
text-align:center;
}
#bg img {
min-height:50%;
min-width:50%;
margin:0 auto;
display:block;
}

Kurz und Knapp: Das Bild wird immer auf die vollständige Breite des Browserfensters skaliert. Es wird automatisch zentriert und kann bei falschen Proportionen in einen umlaufenden Rahmen ausweichen.

Der Inhalt über dem Bild

Das Bild ist perfekt, aber immer noch ein normales Bild und nicht im Hintergrund. In einem weiteren Div-Element wird der Inhalt der Webseite absolut links oben positioniert. Anschließend muss nur noch der Seiteninhalt mit dem z-index vor das Hintergrundbild geholt werden.

#content {
position:absolute;
top:0;
left:0;
z-index:70;
overflow:auto;
}

Fertig! Das nicht ganz gewöhnliche Hintergrundbild ist voll XHTML 1.0 Strict und CSS level 2.1 valide. Mit Ausnahme von minimalen Abweichungen im Bereich von einigen Pixeln stellt jeder aktuelle Browser die selbstskalierende Grafik korrekt dar. Ein komplettes Beispiel der Anwendung gibt es mit einer abendlichen Impression von New York im ZIP-Archiv. ™

arbeitet als Kommunikationsberater für IT-Unternehmen und bloggt gerne über Webtechnologien.

Sortiert nach:   neueste | älteste | beste Bewertung
Leonid Lezner
Gast
6 Jahre 11 Monate her

Ich frage mich, wer das braucht und den Weg geht, auf die Seite die Tabelle und die Divs zu packen, obwohl sie keine Bedeutung haben, außer für’s Aussehen zu sorgen.

Das einfache „position:absolute; width: 100%;“ für das Bild würde das gleiche Tun..

Sorry, aber dieser Beitrag verspätet sich um 6-7 Jahre..

Michel
Gast
6 Jahre 11 Monate her

The future is in the past!

Ich glaube das ist der bisher niederschmetternste Beitrag für den modernen Webdesigner seit langem hier. Tabellen als Layout-Lösung? Ne, vor 6-7 Jahren (oder früher) vielleicht – wie in Kommentar 1 schon gesagt.

Markus
Gast
6 Jahre 11 Monate her

Eigentlich ein Beitrag, den ich eher in den Computerzeitungen meines Vaters erwarten würde, gleich neben dem Trick wie ich mit einer Formular-Select-Box und Javascript ein tolles Dropdown-Menü zaubern kann.

Ganz *toll* finde ich es auch vom Autor, noch zu erwähnen, dass der ganze Schmuh, den er da verzapft hat, „XHTML 1.0 Strict und CSS level 2.1 valide“ ist. Das ist genauso unpassend als wenn in der Zeitung von einem Ladendieb berichtet wird, der bei seiner Verhaftung Anstand und Knigge beachtet hat und höflichst „Danke“ und „Bitte“ sagt.

André Nitz
Gast
6 Jahre 11 Monate her

Ich muss hier meinen Kollegen aus dem Kommentarfeld leider Recht geben. Die qualität der Artikel hat hier wirklich stark nachgelassen. Entweder liegen die richtig guten alle im „Plus“ Bereich, zu dem ich keinen Zugang habe, oder man versucht hier wirklich den anderen Blogs wie z.B. daswebdesignblog.de den Weg frei zu machen.

Denkt mal drüber nach ob da nicht irgendwas in die falschen Wege läuft…

Thomas
Gast
6 Jahre 11 Monate her

Kann mich meinen Vorrednern nur anschließen.

Stefan
Gast
Stefan
6 Jahre 11 Monate her
Hallo, leider verkommt Dr. Web immer mehr zum Meckerblock für Besserwisser und offenbar Frustrierte. Wie wäre es denn zur Abwechslung mal mit etwas konstruktiver Kritik von der alle etwas haben. Oder verfasst selbst mal einen Beitrag, einen Aufruf gab es ja hierzu kürzlich… Allerdings finde auch ich die Tabelle in der Vorlage etwas fraglich, aber das Ganze stellt ja auch nur das Prinzip dar. Jeder meiner vorabkommentierenden Schlaumeier sollte das doch eigentlich wissen. Das Prinzip des skalierenden Hintergrundesbildes an sich finde ich im übrigen nicht uninteressant, da die Bildschirauflösungen ja doch erheblich auseinander gehen und es schon mal vorkommt, dass… Read more »
Christian
Gast
Christian
6 Jahre 11 Monate her

Jetzt mal langsam. Selbst die (viel beachtete) GOTOCHINA-Website http://ringvemedia.com/introduction kommt nicht ohne Table aus, um den derzeit sehr angesagten skalierenden Fullsize-Background zu erreichen.

Wishu
Gast
6 Jahre 11 Monate her

Also das ist wirklich traurig. Es gibt zig Tutorials, wie man das ohne Tabelle etc machen kann. Hat Dr. Web so wenig zu schreiben, dass man nun schon Beiträge aus den 90ern wieder vorkramt?

Leonid Lezner
Gast
6 Jahre 11 Monate her
@Stefan „Besserwisser und offenbar Frustrierte“? Ahnungsloser.. Das Bild wiegt stolze 200 KB. Das geht einfach nicht. Wenn man’s zu sehr komprimiert, sieht es im Vollbild auf dem 22+ Zoll Bildschirm schrecklich aus. Bilder im Browser zu skalieren (auch noch in diesem Ausmaß) ist ebenfalls der falsche Weg. Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen. Sie dient nicht diesem Zweck und man möge sich an die Webstandards halten. „aber das Ganze stellt ja auch nur das Prinzip dar“. Schreibt man Tutorials nicht etwa dafür, dass man damit was anfangen kann? Und wenn… Read more »
Andreas
Gast
Andreas
6 Jahre 11 Monate her

Okay, ich beiße mal an. Postet bitte mal Links zu diesen ganzen massenweisen Tutorials, wie man das ohne Tabelle macht, das Bild sich bei Resize dynamisch an die Browsergröße anpasst und es in allen Browsern funktioniert. Finde die nämlich nicht.

Karl
Gast
Karl
6 Jahre 11 Monate her
@Andreas: Der Zweck heiligt die Mittel nicht. Sicher, man kann vieles machen, wenn man mühsam ausgearbeitete und implementierte Standards über Bord wirft. Aber wenn jeder das machen würde wäre das schlecht für alle. Daran denken: Das Internet (nicht nur das Web) ist erst durch Standards zu dem geworden, was es heute ist – ein freies Netz, deren Technologie meist ohne Patente und finanzielle Kosten genutzt werden kann. Wer solche Hacks benutzt, hat das Prinzip von HTML und CSS nicht wirklich verstanden. Wenn man solche Aktionen schon starten muss, nimmt man Javascript und skaliert damit. Diejenigen, die Javascript abgeschaltet haben, können… Read more »
Stefan
Gast
Stefan
6 Jahre 11 Monate her
@Leonid Es geht um konstruktive und nicht destruktive Kritik. Ich habe doch deutlich gemacht, dass ich dieses Tutorial nicht vorbehaltlos positiv sehe. Aber denkt mal bitte daran, dass immernoch der Ton die Musik macht. Für die 200 KB fürs Image gibt es möglicher Weise eine Lösung via PNG. Bitte über lass es jedem selbst, ob er die Lösung für geeignet hält oder nicht. Außerdem schmeist Du einiges durcheinander, wenn Du von Webstandards und Tabellen sprichst. Tabellen dürfen selbstverständlich benutzt werden, wenn die entsprechenden (XHTML)-Regeln eingehalten werden. Es fragt sich nur ob Tabellen als Layouthilfsmittel (noch) zeitgemäß und im Sinne des… Read more »
Andreas
Gast
Andreas
6 Jahre 11 Monate her

@Karl: Ich will die Tabellenlösung ja nicht benutzen, ich will die standardkonforme Lösung. Laut einigen Kommentatoren gibt es ja viele Möglichkeiten, das mit reinem CSS zu machen, das würde mich auch interessieren.

Andreas
Gast
Andreas
6 Jahre 11 Monate her

@Stefan: Entweder bin ich blind, doof oder ich verpasse etwas. Ich sehe deinen Kommentar, auf den Leonid antwortet nicht, auch keinen Link auf Beispiele.

Leonid Lezner
Gast
6 Jahre 11 Monate her

„Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen.“

D.h. Tabellen darf man nicht fürs Layouten der Seite benutzen. Tabelle ist dazu da, um tabellarische Daten darzustellen. Das ist hier nicht der Fall.

http://www.w3.org/TR/html4/struct/tables.html#h-11.1

Ich schmeiße nichts durcheinander.

Stefan
Gast
Stefan
6 Jahre 11 Monate her

@Andreas

Ich hatte den Kommentar nochmal ergänzt. Schau mal weiter oben nach meinem ersten Kommentar. Ansonsten hier nochmal beide Versionen in der Gegenüberstellung:

Leonids-Vorschlag
LINK: http://contejo.com/test/index.html

Die Alternative ohne Tabelle
Link: http://contejo.com/test/index2.html

sowie das entsprechend angepasste CSS:

#bg {
position:absolute;
width:100%;
height:100%;
}
#bg img {
min-height:100%;
min-width:100%;
margin:0 auto;
display:block;
}

Grüße

Stefan

Wolfgang
Gast
6 Jahre 11 Monate her
Webstandards sind nicht alles und sind auch für die meisten Seitenbesucher total irrelevant. Fakt ist doch, dass man derzeit kaum komplexere Seiten ohne Hacks umsetzen kann, egal ob man die Hacks nun in CSS auslagert oder noch etwas im HTML-Code mitspielen lässt. Der Traum von der Trennung von Inhalt und Design ist eben nur ein Traum und hat nichts mit der Praxis zu tun. Denn schon bei einem Spaltenlayout ist so eine Trennung derzeit nicht möglich, da im HTML-Code immer noch Inhalt einer Spalte zugeordnet wird. Sicher kann man die Spalten per umsortieren, aber auch nur in gewissen Grenzen und… Read more »
Heiko
Gast
6 Jahre 11 Monate her

Beispiele, die ohne Tabellen-Gedöns auskommen wären u.a.:

http://css-tricks.com/how-to-resizeable-background-image/

oder auch mit dem jQuery_Plugin Supersized machbar:

http://www.buildinternet.com/project/supersized/

kyle
Gast
kyle
6 Jahre 11 Monate her

Finde es lustig, wer sich hier alles so wichtig macht…

Die Herren #1, #2, #4, #5 usw. sollten besser ihre Zeit damit verwenden, ihre Seiten valide zu coden anstatt hier gekünstelte Emöprung über das Tabellenlayout zu heucheln.

Den Balken im eigenen Auge übersehen, vor der eigenen Türe kehren und so weiter und so fort…

Horst
Gast
6 Jahre 11 Monate her

hmm ich muss leider auch sagen das die qualität von dr. web extrem nachgelassen hat.

Klar funktioniert die Methode aber ob sie das „Richtige“ ist wage ich zu bezweifeln.

Michael
Gast
Michael
6 Jahre 11 Monate her

Ja,
man kann ein Auto auch per kurzschließen starten.
Ob es ratsam ist?

Mein Blick schweift immernoch auf den Kalender. :D
Leider nicht der 1. April.

Evt. kann es jemand für seine priv. „Hoomhepeeetsch“ gebrauchen.

Andreas
Gast
Andreas
6 Jahre 11 Monate her

@Stefan:

http://contejo.com/test/index2.html funktioniert in FF3, IE8, Chrome und Opera 9.6 einwandfrei, das sieht ziemlich gut aus. Werde weiter testen. ^^

Klawischnigg
Gast
Klawischnigg
6 Jahre 11 Monate her
@Leonid Ich finde dieses Sendungsbewusstseinbehaftete Getue einfach lächerlich. Zitat: „Eine Tabelle darf man nicht (nicht „etwas fraglich“. gar nicht. niemals und nie!) für sowas benutzen.“ – wo steht das? In der Bibel des selbsternannten Webdesigner-Wächterrats oder gar im Strafgesetzbuch? Natürlich heiligt hier der Zweck das Mittel. Es geht um so etwas Ungefährliches und Unwichtiges wie Webdesign, nicht um die Sicherheit eines Flugzeugs oder die Reliability einer Kernreaktorkühlung. Wem also schaden zwei lächerliche Tabellen auf einer Seite mit skalierbarem Hintergrund??? (den ich persönlich auch für völlig überflüssig halte, aber das ist ja nicht das Thema. Geschmackspolizei gibts zum Glück genauso keine… Read more »
Oliver
Gast
6 Jahre 11 Monate her
Oh mann, was soll das denn bitte sein? 1.) Wir kämpfen jetzt seit 8 Jahren gegen Tabellen als Layoutmittel und dann soll man es benutzen, um ein Bild zu skalieren – nebenbei bemerkt noch völlig sinnfrei? 2.) Wir kämpfen eben so lange gegen die Skalierung von Bildern, weil es in den meisten Browsern und Auflösungen zum Kotzen aussieht. Also was hat uns dieser Artikel jetzt gesagt? Richtig, NIX! @Klawischnigg: Hier lesen überwiegend Profis, die davon leben, gute Arbeit zu machen. Ich kann meinem KFZ Mechaniker auch erklären, dass so lange die Reifen fest sind, er keinen Drehmomentschlüssel braucht und er… Read more »
Klawischnigg
Gast
Klawischnigg
6 Jahre 11 Monate her
@Oliver Das mag sein, daß hier Profis lesen, bleibt die Frage, warum sie nur lesen und nicht selbst Kommentare schreiben. Abgesehen davon, daß die Probleme von Screenreadern mit Tabellen nur ein hartnäckig sich haltendes Gerücht sind (schon gar mit einer leeren Tabelle, die wird von einem Screenreader einfach überlesen, auch von denen, die nicht nur einfach alle zur Tabelle gehörenden Elemente strippen) zeigt Sendungsbewusstsein, wie es hier teilweise zur Schau gestellt wird, mitnicht von Professionalität. Während nämlich diese „Profis“ noch tagelang darüber diskutieren und schulmeistern, wie böse Tabellen sind und wie gross der Bogen sein muss, den man als „Profi“… Read more »
Wolfgang
Gast
6 Jahre 11 Monate her

> 2.) Wir kämpfen eben so lange gegen die Skalierung von Bildern, weil es in den meisten Browsern und Auflösungen zum Kotzen aussieht.

Also wenn ich mir ringvemedia in verschiedenen aktuelleren Browsern anschaue, sieht es überall ganz gut aus. Es hängt sicher stark vom Motiv ab, wie es dann letztendlich wirkt.

TruckTurner
Gast
TruckTurner
6 Jahre 11 Monate her
Merkt ihr Nörgler eigentlich noch irgendetwas?!?! Geht doch bitte mal auf die vom Autoren genannte Website und lasst Euch den visuellen Reiz auf dem Augapfel zergehen. Wem dabei keiner abgeht, dem kann eh nicht geholfen werden – und klickt dann bitte einfach weiter. Der Clou an dieser Sache ist, dass sich der Effekt jetzt gänzlich ohne JS-Gefrickel und ohne Flash realisieren lässt, was bislang eben nicht möglich war. @wishu: Auch ich hätte gerne ein paar Quellenangaben aus den 90ern – müssen nicht gleich ‚zig‘ sein – wo dies bereits ohne Tabelleneinsatz beschrieben ist. Dass der Fokus hierbei nicht auf Leichtgewicht… Read more »
Oliver
Gast
6 Jahre 11 Monate her
@Wolfgang Dann schaue es Dir mal auf nem 22″, 24″ oder 30″ Monitor an – bei einer 1600er Breite sieht es schon schwammig aus. Auf „normalen“ Auflösung mag es ok aussehen, aber „eindrucksvoll skalieren“ ist für mich was anderes. @Klawischnigg Eine nicht sinnvolle Lösung einzusetzen, weil man damit ja schneller fertig ist, ist nicht mein Stil und wohl auch nicht der der meisten anderen hier, wenn ich die Kommentare richtig deute. Wenn ich so arbeiten wollte, würde ich meine Dienste für 10 Euro bei ebay anbieten. Das hat dann aber nichts mehr mit professioneller Arbeit zu tun. Nochmal: In eine… Read more »
Gast
Gast
Gast
6 Jahre 11 Monate her
„Webstandards sind nicht alles und sind auch für die meisten Seitenbesucher total irrelevant. Fakt ist doch, dass man derzeit kaum komplexere Seiten ohne Hacks umsetzen kann, egal ob man die Hacks nun in CSS auslagert oder noch etwas im HTML-Code mitspielen lässt.“ Fakt ist, daß man durchaus Inhalt und Design auch in einem Spaltenlayout trennen kann. Die Zuweisung von Inhalt mittels HTML zu einem gelayouteten Designcontainer hebt diese Trennung nicht auf. „Sicher kann man die Spalten per umsortieren, aber auch nur in gewissen Grenzen und mit dem Problem, dass die Reihenfolge am Bildschirm evtl. nichts mit dem Content zu tun… Read more »
trackback

[…] drweb.de zeigt, wie ringvemedia auf ihrer GOTOCHINA Webseite – einem Projekt von 17 norwegischen Studenten – unter Nutzung einer Tabelle den skalierbaren Hintergrund eingebunden haben. […]

Klawischnigg
Gast
Klawischnigg
6 Jahre 11 Monate her

@Oliver

Genau. „In eine Tabelle gehören Daten, basta!“ – Dafür daß Du da acht Jahre lang dafür gekämpft hast ist Deine „Argumentation“ noch etwas unbeholfen. Aber wahrscheinlich hast Du einen Teil der Zeit ja auch damit verplempert, normative Regeln für alle aufzustellen, welche Designexperimente nach Ansicht des grossen Oliver sinnlos sind und welche nicht…

Wenzel M.
Gast
6 Jahre 11 Monate her

Ein netter VErsuch, aber mit Tabellen arbeite ich seit dem 16. Jahrhrundert nicht mehr.

Oliver
Gast
6 Jahre 11 Monate her

@Klawischnigg:
Da gibt es auch nichts zu diskutieren. Wer den Sinn von Tabellen nicht verstanden hat, sollte sich nach einem anderem Hobby, auf jeden Fall aber nach einem anderem Beruf umsehen.

Andreas
Gast
Andreas
6 Jahre 11 Monate her

@Oliver

Also ich find’s bei 1920×1200 noch ganz passabel (beziehe mich auf die Version von Stefan ohne Tabelle, aber das dürfte keinen Unterschied machen). Klar, es ist nicht superscharf, aber für ein Hintergrundbild völlig im Rahmen.

jim
Gast
jim
6 Jahre 11 Monate her

Hi Leute!

1.Die Webstandards machen uns das Leben leichter, weil die Seiten überall ;) funktionieren.

2.Tabellen sind für Daten da nicht fürs Layout. Oder benutzt hier jemand einen Hammer zum Schrauben?

3.Ein Hintergrundbild sollte man nicht überbewerten, es ist Nebensache, deshalb der Begriff *Hintergrundbild*.

Grüße

Wolfgang
Gast
6 Jahre 11 Monate her
@Oliver: Das Bild ist an sich schon nicht sonderlich scharf. Ich finde auch auf 24″ erfüllt es seine Wirkung und in modernen Browsern wird es auch nicht pixelig, sondern nur noch unschärfer. Das ist bei so einem Smog-Bild meiner Ansicht nach kein Problem. Sicher Eindrucksvoller wäre es, wenn die Daten aus einer Bildpyramide passend zu Größe geladen werden würden, aber soweit sind wir ja leider noch lange nicht. @Gast: Trennung von Design und Inhalt ist nur ein theoretisches Ideal, in der Praxis ist der Inhalt meist mit dem Layout verheiratet. Nehmen wir doch mal drweb.de. Die Kommentare sind konkret der… Read more »
Harry Schmieder
Gast
6 Jahre 11 Monate her
„Form follows function“ –> Louis Sullivan, amerikanischer Architekt… Da ist viel wahres dran! Man MUSS ja NICHT UNBEDINGT ein riesiges Re-size Hintergrundbild in die Homepage integrieren. Schon garnicht, wenn es über Tabellen funktioniert (mit Java ginge es bestimmt auch, ist aber dieselbe Ka… – sorry. Dann lieber mit validem css-code. Bliebe immer noch das Problem der Qualität des Bildes bei Fullsize oder Minisize. Für mich ist diese Idee nicht ausgegoren genug, dass ich es je so anwenden würde. Und ich möchte mit meiner css- und html-Schreibweise nicht zurück in die Steinzeit geworfen werden für etwas, was man nicht unbedingt braucht.… Read more »
Heike Werneburg
Gast
6 Jahre 11 Monate her
Hallo, ich bin eher für die Einhaltung von Standards. Und ich muss sagen, bei Dr. Web gibts seit Jahren immer mal wieder nen Artikel der das Ganze in Frage stellt. Dr. Web brauchte wirklich lange, um sich in Richtung Usability und Barrierefreiheit zu wenden. Das ist das Ziel der Standards. Ich denke manchmal darf man, wenn man die Regeln gut genug kennt, diese auch mal brechen. Ich würde lieber anfangen zu akzeptieren, dass auch die Möglichkeiten im Web endlich sind. Jedenfalls in Bezug auf das perfekte Design. Man sieht es anschaulich an den Websites der Grafikdesigner die dann alles auf… Read more »
andy
Gast
6 Jahre 11 Monate her

Hier das Original von Stu Nicholls.
http://www.cssplay.co.uk/layouts/background.html
Die Seite ist ohne Flash und Javascript und validiert als XHTML 1.0 Strict.
So geht das.

Torsten
Gast
2 Jahre 11 Monate her

Jo, wunderbar unproportional skaliert. Dieses Beispiel dürfte noch aus einer Zeit stammen, als alle Bildschirme ein Seitenverhältnis von 4:3 hatten und es außerdem noch keine hochformatigen Anzeigegeräte gab (Smartphones, Tablet PCs etc.).

Dieter Petereit
Dr. Web
2 Jahre 11 Monate her

Steht sogar dran. Der Beitrag wird Ende der Woche 4 Jahre alt.

Heike Werneburg
Gast
6 Jahre 11 Monate her

danke @andy

Brat mir einen n Storch ;-) der Hase ist aber breit gezerrt.

Gast
Gast
Gast
6 Jahre 11 Monate her
„Also muss ich an den Inhalt ran, um das Design zu ändern. Eine echte Trennung wäre es, wenn jeder Sinnabschnitt separat behandelt werden kann und nicht durch diverse verschachtelte Divs schon einer Design-Idee zugeordnet wird. Eine Seite im HTML-Quellcode auf 3 Spalten vorzubereiten ist keine Trennung von Design und Inhalt. CSS 2 ist da einfach zu beschränkt. Erst wenn man Spalten rein im CSS definiert und dort Sinnabschnitte diesen zuweist, kann man von Trennung sprechen.“ @Wolfgang Bleib bei deiner Software, von HTML und CSS hast du leider absolut keine Ahnung… und verschon‘ uns hier mit deinen aufgeblähten Sprüchen und Halbwissen,… Read more »
Gast
Gast
Gast
6 Jahre 11 Monate her

„Hier das Original von Stu Nicholls.
http://www.cssplay.co.uk/layou [www.cssplay.co.uk]
Die Seite ist ohne Flash und Javascript und validiert als XHTML 1.0 Strict.
So geht das.“

Schönes Experiment und Stu Nicols in allen Ehren, aber so geht das garantiert nicht – hat nix mit professionellem Webdesign zu tun….

Rene Schmidt
Gast
6 Jahre 11 Monate her

@Wolfgang: Zu Web-Standards: Zu glauben, sie wären irrelvant, ist ein großer Fehler. Die Tatsache, dass es Standards gibt und sich die meisten Web-Designer und -Entwickler mehr oder weniger eng an sie halten ist einer der Gründe für das Aufblühen des Webs in den letzten 15 Jahren.

Weiterhin: http://www.reneschmidt.de/welchen-zweck-erfuellen-standards/

DerLeser
Gast
DerLeser
6 Jahre 11 Monate her

Aufgeblasene Kommentare hier… Schade um den Speicherplatz.

tekl
Gast
6 Jahre 11 Monate her
@Gast: Was haben meine Aussagen denn bitte damit zu tun, welche Software ich einsetze? Ich habe iWeb nur aus Zeitgründen eingesetzt, um den Aufwand so gering wie möglich zu halten. Sonst hätte ich das Plugin für mich behalten müssen. Daraus auf andere Projekte zu schließen ist ziemlich vermessen. Zum Thema: Was DIV-Element sind und wozu sie genutzt werden sind zwei paar Schuhe. Gleiches Problem besteht ja auch bei den Tabellen. Fakt ist, dass DIVs meist zu Layoutzwecken verschachtelt werden und nicht um semantisch zusammenhängende Inhalte zu gruppieren. Das es da Überschneidung gibt, ist klar, tut aber nichts zur Sache. @Rene:… Read more »
daniel5959
Gast
daniel5959
6 Jahre 11 Monate her
Hallo, köstlich diese Experten-Streitereien, normalerweise blättere ich weiter, aber heute habe ich mal genüsslich darin gebadet. Ich bin kein Profi und ganz gerne der Zeit einige Jahre hinterher, erspart mir viel Stress und Irrwege. Im Beruf habe ich jahrzehntelang mit Hunderstel Millimeter gekämpft und dann finde ich (seit 2002 im Internet) in Homepageforen und -seiten die W3C-Erbenzähler. Zum Beispiel marquee von Microsoft, jahrelang verteufelt als „nicht valide“ und versucht mit ellenlagen Javascript zu umgehen, nun soll es wohl mit CSS3 in ähnlicher Weise kommen. Warum nicht gleich? Und warum kann das W3C nicht beim Hintergrund einfach eine Option dazu machen?… Read more »
Bastian
Gast
6 Jahre 11 Monate her

Bei 4,290 Artikel müssen eben auch mal triviale Themen behandelt werden. Besser etwas verspätet als nie. Aber deshalb muss man sich doch wirklich nicht beschweren oder?

Muadib
Gast
Muadib
6 Jahre 11 Monate her
Worum geht es denn hier eigentlich noch, um den Sinn von Webstandards, um die Möglichkeiten ein Hintergrundbild per CSS zu skalieren oder um die Frage darf man heute noch schreiben, dass man dazu eine Tabelle „misbrauchen“ könnte, ohne dafür gleich „gelyncht“ zu werden? Für alle die sich noch für das eigentliche Thema interessieren und wie man das Ganze möglicherweise auch ohne Tabellen lösen kann, empfehle ich den Ansatz von Stefan. (Ich fürchte das geht hier im o.g. Zwist noch unter.) Soweit ich es getestet habe, funktioniert dieser doch wunderbar. Ganz im Gegenteil zu den vielen anderen Vorschlägen, die sonst noch… Read more »
Wolfgang
Gast
6 Jahre 11 Monate her

Die Lösung von Stefan ist in der Tat sehr elegant, doch leider läuft sie nicht im IE6.

Stefan
Gast
6 Jahre 11 Monate her

@Wolfgang

Danke für den Hinweis, ich hatte es ja wie gesagt nicht wirklich getestet. Mit dem „Min-Height Fast Hack“ Link: http://www.dustindiaz.com/min-height-fast-hack/ geht es nun auch im IE6, allerdings wird das Bild hier verzerrt. (Na ja selbst Schuld wer den IE6 noch nutzt. :))

Hier das entscheidende CSS-Snippet:

#bg img {
min-height:100%;
height:auto !important;
height:100%;
min-width:100%;
width:auto !important;
width:100%;
margin:0 auto;
display:block;
}

Zum Test Link: http://contejo.com/test/index2.html

Grüße

Stefan

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen