zentriertes und angepasstes Hintergrundbild
jobo
- design/layout
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
@@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'
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
@@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'
@@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'
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
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
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
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