CSS Background img auf volle breite

[Reglohln]

Aber was nützen dir dyn. Bilder beim Menü, wenn dieses eh eine feste oder zumindest eine minimale Breite hat? Vllt bin ich ja auch einfach altbacken, aber ich sehe keinen Grund, die "althergebrachten" Banner/Header beizubehalten. Einfach ein Bild fester Größe oben und gut ist.

Und Tabellenlayout hat nichts mit mobilen Geräten zu tun. Jeder Browser (egal, ob mobiles Gerät oder PC) sollte sich standardkonform bezüglich HTML und CSS verhalten. Somit ist es auch mit semantisch korrektem Code möglich, Seiten für mobile Geräte zu erstellen. Und zumindest für Smartphones (also recht kleine Clients) wird man eh nur eine sehr abgespeckte Version der Seite darstellen. Siehe computerbase. Das gefällt mir auf meinem Smartphone sehr gut.

Tablets/Phablets sind noch eine andere Angelegenheit. Vorallem bei der mittlerweile verfügbaren Auflösung. Da könnte man vllt sogar die normale Seite anzeigen lassen. Aber da habe ich zu wenig bzw. eigentlich garkeine Erfahrung.

 

[Daaron]

aber in Sachen webdesign bin ich auch nur ein noob muss ich gestehen ich bin programmierer aber kein webdesigner ^^ ... und wenn man es irgendwie "stretcht" siehts auch blöd aus.:/

Gerade als Programmierer solltest du wissen, dass semantische Korrektheit über alles geht. <table> enthält NUR UND AUSSCHLIESSLICH tabellarischen Inhalt. Du würdest doch hoffentlich keine nummerierte Aufzählung mit <ul> oder gar ner Serie von <div> oder <p> machen, hm? Nein, du würdest (hoffentlich) auf den Schwengel kommen, dass <ol> korrekt ist.

Klar muss das Bild vollständig geladen werden. Da könnte man aber unter Umständen versch. Auflösungen nehmen und diese je nach Clientauflösung setzen. Bedingt zwar wieder JS, aber es wäre eine möglichkeit.

Wozu JS? Alle relevanten Systeme beherrschen CSS Media Queries.
- lade "ultrabreit.jpg" als Background
- wenn Breite < 1200, lade 1200px.jpg
- wenn Breite < 800, lade 800px.jpg
...
Sollte funktionieren, wenn der Browser halbwegs clever arbeitet und nur die Background-Images lädt, die auch wirklich benötigt werden.

Alles besser, als irgendwelche Experimente mit proprietären CSS-Argumenten oder semantisch falschen Inhaltselementen, wie <img>.

background-size ist nicht proprietär, es ist Stand der Technik. Nur extrem veraltete Versionen von Chrome, FF und Opera benötigen ein Vendor Prefix. Der IE<=8 ist hier lediglich mal wieder ein Spezialfall... aber mit der Krücke hätte ich kein Mitleid. Die würde bestenfalls einen JS-Fallback bekommen, und zwar einen, der pro Sekunde 1000 Popups mit Upgrade-Hinweisen öffnet.

 

[master2k]

joah dass stimmt ich missbrauche oft table 100% und einen eingebetteten table drin zentriert damit alels perfekt zentriert ist ... besten falls macht man das mit divs .. iss halt ne schlechte angewohneit ^^

 

[Reglohln]

Wozu JS? Alle relevanten Systeme beherrschen CSS Media Queries.
- lade "ultrabreit.jpg" als Background
- wenn Breite < 1200, lade 1200px.jpg
- wenn Breite < 800, lade 800px.jpg
...
Sollte funktionieren, wenn der Browser halbwegs clever arbeitet und nur die Background-Images lädt, die auch wirklich benötigt werden.

Stimmt - an die habe ich gar nicht gedacht. Fehlt mir, wie fast immer, die Erfahrung. Brauchte sowas einfach noch nie.

background-size ist nicht proprietär, es ist Stand der Technik. Nur extrem veraltete Versionen von Chrome, FF und Opera benötigen ein Vendor Prefix. Der IE<=8 ist hier lediglich mal wieder ein Spezialfall... aber mit der Krücke hätte ich kein Mitleid. Die würde bestenfalls einen JS-Fallback bekommen, und zwar einen, der pro Sekunde 1000 Popups mit Upgrade-Hinweisen öffnet.

Ah, sorry. Ich hatte in einem falschen Post von jemand anderem geschaut und da ging es um proprietäre Argumente. Ja - CSS3 unterstützt dies direkt. Und der IE bis Version 8 macht mal wieder Zicken ^^

Trotzdem bleibe ich bei meiner Meinung: für dieses spezielle Problem in diesem Thread würde ich keine Lösung suchen, sondern das Design ändern. Zumindest die Testseite von master2k ist ein Beispiel dafür, wie man es mMn nicht machen sollte im Bezug auf das Hintergrundbild (egal, ob mit <img> oder background-size).

 

[Daaron]

joah dass stimmt ich missbrauche oft table 100% und einen eingebetteten table drin zentriert damit alels perfekt zentriert ist ... besten falls macht man das mit divs .. iss halt ne schlechte angewohneit ^^

Unlogische Klassennamen, die man 2 Jahre später nicht mehr versteht, zu vergeben ist eine schlechte Angewohnheit. Keine Kommentar in PHP-Code zu schreiben ist eine schlechte Angewohnheit. <table> für nicht-tabellarische Daten zu verwenden ist schlichtweg falsch.

Stimmt - an die habe ich gar nicht gedacht. Fehlt mir, wie fast immer, die Erfahrung. Brauchte sowas einfach noch nie.

Trotzdem bleibe ich bei meiner Meinung: für dieses spezielle Problem in diesem Thread würde ich keine Lösung suchen, sondern das Design ändern. Zumindest die Testseite von master2k ist ein Beispiel dafür, wie man es mMn nicht machen sollte im Bezug auf das Hintergrundbild (egal, ob mit <img> oder background-size).

Vollflächige Hintergründe sind aber nichts, was so extrem ungewöhnlich ist. Du denkst hier sowieso etwas zu eng. Wer sagt, dass der Hintergrund eine Grafik ist? Schon mal Videos als Hintergrund verwendet? Das sieht mit dem richtigen Clip einfach nur hammermäßig aus.
Aber auch eine einfache Hintergrundgrafik kann die Seite deutlich von anderen abheben. Ich denke da z.B. an dezente Floral-Muster oder extrem komplexe Verläufe (die zu komplex für CSS3 sind).

Und dann ist da noch die Sache mit JavaScript..... Aus einer Reihe von übereinander liegenden Backgrounds (als Multiple Background in einem Element) und etwas JavaScript könnte man einen genialen Parallaxe-Effekt erschaffen.

 

[Reglohln]

Klar kann man viel machen. Und auch ich verwende natürlich (teils komplett füllende) Hintergrundbilder. Wobei weniger einfach oft mehr ist.

Ich möchte Hintergrundbilder auch keineswegs verbieten oder als schlecht deklarieren. Habe mich evtl. auch einfach ungeschickt ausgedrückt. Aber ich finde es in diesem Fall hier unnötig (sofern ich ihn richtig verstanden habe), das Bild mit dem Browser dyn. skalieren zu lassen. Erstens unterstützten es wieder nicht alle Browser (ich weiß, damit hast du kein Problem, aber so ein einfaches Hintergrundbild kann wieder ohne großen Aufwand in allen Browsern annährend gleich aussehen. Wobei man testen müsste, wie es mit background-size in Browsern aussieht, die dies nicht unterstützen. Vllt. kann man den negativen Effekt auch vernachlässigen) und zweitens ist es meines Erachtens ungünstig für den Betrachter. Auf der Beispielseite von master2k z.B. würde mich das extrem irritieren, auch, wenn es auf der Seite nur zu Testzwecken war.

Dein Beispiel für dezente Florals ließe sich z.B. auch mittels kachelbaren Bildern oder einem großen Bild, was dann an den Seiten mittels Farbverlauf in die Hintergrundfarbe übergeht, lösen. Somit hat man ein schönes Hintergrundbild, was nicht irritierend mitskaliert wird (und dadurch ggf. sogar extrem pixelig wirkt) und man muss sich um keine Kompatiblität kümmern.

 

[Daaron]

background-size wird von alten Rotzbrowsern einfach ignoriert, das Bild wird in seiner vollen Ausdehnung dargestellt. Da der TE aber bereits eine Deklaration für multiple backgrounds verwendet hat, kann er im selben Abwasch auch auf all den anderen "üblichen" CSS3-Kram setzen.
Manche Sachen gehen eben nur mit CSS3, für die Holzklasse baut man dann bestenfalls ein nicht vollkommen hässliches Fallback. Man könnte z.B. sogar SVG als Background nehmen (für passende Grafiken). Schon hast du kein Aufpixeln, vollkommen flexible Auflösungen und oftmals mikroskopische Dateigrößen.
Es gibt noch weitere Tricks, wie man Aufpixeln (z.B. bei Hintergrund-Videos) maskieren kann...