zentriertes und angepasstes Hintergrundbild

[jobo]

Hallo,

für ein Ferienhaus ist ja ein etwas blassgefiltertes Hintergrundbild von Himmel-Meer-Strand ganz passend. Stört die Schrift auch nicht und ist so auch auf dem dazugehörigen (Print-)Flyer. Ein solches Bild an alle möglichen Viewports oder die 90%-häufigsten anzupassen ist ja wohl ein Kunsstück, wenn man <IE9 kompatibel bleiben will http://forum.de.selfhtml.org/archiv/2011/1/t202898/#m1371086 bzw. http://css-tricks.com/perfect-full-page-background-image/. Andererseits wirkts zumindest beim Print erstmal gleich plastischer. Gibts da ein Best-Practice? zB.: sein lassen (;-)?

Gruß

jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

Ein solches Bild an alle möglichen Viewports oder die 90%-häufigsten anzupassen ist ja wohl ein Kunsstück

Nicht mit background-size.

wenn man <IE9 kompatibel bleiben will

Dann wird’s halt in alten IEs nicht skaliert. Da geht die Welt nicht unter. Progressive enhancement rules.

Natürlich für den nicht vom Bild abgedeckten Bereich eine passende Hintergrundfarbe setzen, entweder über dem Bild himmelblau oder darunter sandfarben.

Qapla'

[jobo]

Hallo,

@@jobo:

nuqneH

Ein solches Bild an alle möglichen Viewports oder die 90%-häufigsten anzupassen ist ja wohl ein Kunsstück

Nicht mit background-size.

  
html {  
        background: url(images/bg.jpg) no-repeat center center fixed;  
        -webkit-background-size: cover;  
        -moz-background-size: cover;  
        -o-background-size: cover;  
        background-size: cover;  
}  

sagt verlinkter css-tricks.com-artikel, als erste bzw. css3-lösung.

Natürlich für den nicht vom Bild abgedeckten Bereich eine passende Hintergrundfarbe setzen, entweder über dem Bild himmelblau oder darunter sandfarben.

Ja, da müsste man eigentlich im oberen Teil blau sein und unten Sandfarben, also zwei oder dreigeteilt. Das wäre dann wohl doch etwas aufwändig.

Gruß

jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

Ja, da müsste man eigentlich im oberen Teil blau sein und unten Sandfarben, also zwei oder dreigeteilt. Das wäre dann wohl doch etwas aufwändig.

Nö, das wäre ein Gradient. IE kann das mit proprietärem Filter.

Qapla'

[Gunnar Bittersmann]

@@jobo:

nuqneH

-webkit-background-size: cover;

Für welche in freier Wildbahn anzutreffenden Browser sollte das erforderlich sein? Aktuelle Chrome und Safari verstehen background-size.

-moz-background-size: cover;

Ja, ein paar Firefox < 4 sind wohl noch im Umlauf.

-o-background-size: cover;

Gab’s das mal? Der aktuelle Opera versteht das nicht.

background-size: cover;

Je nach Motiv könnte auch background-size: 100% 100% sinnvoll sein, um den gesamten Viewport auszufüllen.

Qapla'

[jobo]

Hallo,

background-size: cover;

Je nach Motiv könnte auch background-size: 100% 100% sinnvoll sein, um den gesamten Viewport auszufüllen.

Das wohl richtig. Sollte bildfüllend sein. Und der Rest kann demnach raus.

Gruß

jobo

[jobo]

Hallo,

und kann man nun @font-face nehmen oder nicht, für die Einbindung einer bestimmten Schrift (in dem Fall "Harrington", weil vom Grafiker so im Flyer gewählt).

http://craigmod.com/journal/font-face/ bzw. SELFHTML - das sei IE-Proprietär.

Oder doch lieber sIFR nehmen?

Gruß

jobo

[jobo]

Hallo,

http://craigmod.com/journal/font-face/ bzw. SELFHTML - das sei IE-Proprietär.

Oder doch lieber sIFR nehmen?

Oder eben nur die modernen Browser mit "Harrington" als ttf beglücken? http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/. IE <9 kriegt dann was mit Serifen (;-).

Gruß

jobo

[Matthias Apsel]

Om nah hoo pez nyeetz, jobo!

Oder eben nur die modernen Browser mit "Harrington" als ttf beglücken? http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/. IE <9 kriegt dann was mit Serifen (;-).

oder doch @font-face testen und jeder Browser nimmt sich, was er braucht.

Matthias