{"id":3029,"date":"2013-06-13T18:53:44","date_gmt":"2013-06-13T16:53:44","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=3029"},"modified":"2017-12-03T11:06:22","modified_gmt":"2017-12-03T09:06:22","slug":"css3-background-size-und-das-gute-alte-background-attachment","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2013\/06\/css3-background-size-und-das-gute-alte-background-attachment\/","title":{"rendered":"CSS3 background-size und das gute alte background-attachment"},"content":{"rendered":"<p>F\u00fcr meinen <a href=\"http:\/\/www.jukemedia.de\/shop\">shop<\/a> habe ich eine neue Theme-Reihe erstellt und gleich 5 neue Themes eingestellt. Weil ich meinem Grundsatz mit m\u00f6glichst einfachen Mitteln ohne viel zus\u00e4tzliche Erweiterungen, angepasste Templates oder externe Skripte einfach zu verwendende Themes erstellen m\u00f6chte, stehe ich manchmal vor einem Problem, denn die Super-Effekte sind meist doch nur mit Hilfe von jQuery oder MooTools zu erreichen.<\/p>\n<p>Aber ein kleines Highlight habe ich dennoch gefunden.<\/p>\n<p>Big Pictures im Webseitenhintergrund. Es braucht auf einer Webseite manchmal nicht viel, wenn es sch\u00f6ne und sorgf\u00e4ltig ausgesuchte Bilder gibt. Die Macht der Bilder ist einfach unschlagbar, aber wie jetzt Bilder ohne die zus\u00e4tzliche Erweiterung Background-Stretcher einbauen?<\/p>\n<p>Mit CSS3 gibt es eine neue Auszeichnung: <strong>background-size<\/strong>. Stellt man hier den Wert auf <strong>cover<\/strong>, wird ein Hintergrundbild auf die Breite des Viewports proportional gestreckt. Das Unsch\u00f6ne daran ist aber, dass das Bild, bei langen Webseiten, natr\u00fclich irgendwann einmal endet und die normale Hintergrundfarbe zum Vorschein kommt. Nicht ganz so fein. Umgehen kann man das Ganze jedoch, indem man das gute alte <strong>background-attachment:fixed<\/strong> ins Spiel bringt.<\/p>\n<p>Und weil der IE8 background-size:cover nicht versteht, f\u00fcgt man f\u00fcr das Bild einfach<br \/>\n<strong>background-position: center top; <\/strong>hinzu. In den meisten F\u00e4llen muss man ja ein gro\u00dfes Hintergrundbild sowieso in gr\u00f6\u00dferen Abmessungen hinzuf\u00fcgen damit die Qualit\u00e4t nicht leidet. Deshalb kann man gro\u00dfe Hintergrundbilder auch \u00fcber background-position meist so positionieren, dass sie mittig hinter dem wrapper liegen. Beim IE8 schaut zwar dann zwar links und rechts Hintergrundfarbe von boy raus &#8211; aber mir pers\u00f6nlich macht es nichts aus, wenn es imIE8 halt nur ein Behelf ist.<\/p>\n<p><a title=\"Contao Theme mit background-size\" href=\"http:\/\/www.themes.jukeshop.de\/baskanik4\/\">Beispiel anschauen<\/a><\/p>\n<figure id=\"attachment_3032\" aria-describedby=\"caption-attachment-3032\" style=\"width: 990px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2013\/06\/baskanik4-bg0-1000-1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2013\/06\/baskanik4-bg0-1000-1.png\" alt=\"Contai Theme baskanik 4\" width=\"1000\" height=\"500\" class=\"size-full wp-image-3032\" srcset=\"https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2013\/06\/baskanik4-bg0-1000-1.png 1000w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2013\/06\/baskanik4-bg0-1000-1-300x150.png 300w, https:\/\/www.jukemedia.de\/blog\/wp-content\/uploads\/2013\/06\/baskanik4-bg0-1000-1-768x384.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><figcaption id=\"caption-attachment-3032\" class=\"wp-caption-text\">Contao Theme baskanik 4<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>F\u00fcr meinen shop habe ich eine neue Theme-Reihe erstellt und gleich 5 neue Themes eingestellt. Weil ich meinem Grundsatz mit m\u00f6glichst einfachen Mitteln ohne viel zus\u00e4tzliche Erweiterungen, angepasste Templates oder externe Skripte einfach zu verwendende Themes erstellen m\u00f6chte, stehe ich manchmal vor einem Problem, denn die Super-Effekte sind meist doch nur mit Hilfe von jQuery  &#8230; <a title=\"CSS3 background-size und das gute alte background-attachment\" class=\"read-more\" href=\"https:\/\/www.jukemedia.de\/blog\/2013\/06\/css3-background-size-und-das-gute-alte-background-attachment\/\" aria-label=\"Mehr Informationen \u00fcber CSS3 background-size und das gute alte background-attachment\">Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":3032,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[],"yst_prominent_words":[],"class_list":["post-3029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","category-contao"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=3029"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3029\/revisions"}],"predecessor-version":[{"id":4227,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/3029\/revisions\/4227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media\/3032"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=3029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=3029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=3029"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=3029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}