{"id":266,"date":"2023-01-04T08:00:00","date_gmt":"2023-01-04T07:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=266"},"modified":"2023-08-30T10:38:48","modified_gmt":"2023-08-30T08:38:48","slug":"css-hintergrundgrafik","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2023\/01\/04\/css-hintergrundgrafik\/","title":{"rendered":"CSS Hintergrundgrafik"},"content":{"rendered":"\n<p>Unsere Webseite soll nun eine Hintergrundgrafik bekommen und dieser Artikel beschreibt verschiedene M\u00f6glichkeiten der Gestaltung\u2026<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Beispielseite f\u00fcr die Experimente:<\/strong><\/p>\n\n\n\n<p>Auf der Beispielseite zu diesem Kapitel werden die Hintergrundgrafiken f\u00fcr Textbereich und Spalte 3 auf beide m\u00f6glichen Methoden eingef\u00fcgt.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hintergrundgrafik scrollt (Spalte 3)<\/li>\n\n\n\n<li>Hintergrundgrafik fixiert (Textbereich)<\/li>\n<\/ul>\n\n\n\n<p>Mit folgendem CSS wird die Hintergrundgrafik fixiert:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>background-image: url(..\/02_Bilder\/Pfadangabe zur Grafikdatei);<\/li>\n\n\n\n<li>background-attachment: fixed;<\/li>\n<\/ul>\n\n\n\n<p><strong>Hintergrund kacheln\u2026:<\/strong><\/p>\n\n\n\n<p>Die Methoden um den Hintergrund zu kacheln werden auch vorgestellt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>background-repeat: repeat-y<\/li>\n\n\n\n<li>background-repeat: repeat-x<\/li>\n\n\n\n<li>background-repeat: no-repeat<\/li>\n<\/ul>\n\n\n\n<p>Mit repeat-y wird nur vertikal gekachelt. Mit repeat-x wird nur horizontal gekachelt und mit no-repeat wird ga rnicht gekachelt\u2026Das sollte auf der Beispielseite einfach mal ausgetestet werden.<\/p>\n\n\n\n<p><strong>Hintergrund positionieren:<\/strong><\/p>\n\n\n\n<p>Die Methoden um den Hintergrund zu positionieren werden auch vorgestellt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>background-position: top<\/li>\n\n\n\n<li>background-position: right<\/li>\n\n\n\n<li>background-position: bottom<\/li>\n\n\n\n<li>background-position: left<\/li>\n<\/ul>\n\n\n\n<p>Auch diese Eigenschaften und Funktionen sollten einfach mal auf der Beispielseite ausprobiert werden.<\/p>\n\n\n\n<p><strong>Grafik mit Zoomfaktor:<\/strong><\/p>\n\n\n\n<p>Erinnern wir uns noch an die Grafik mit Zoomfaktor? Im Artikel \u201cArtikelgestaltung 2\u201c wurde die zoomf\u00e4hige Grafik beschrieben\u2026<\/p>\n\n\n\n<p>Durch eine kleine Anpassung des Grafiklinks wurde die Grafik zoomf\u00e4hig \u2013 passte sich also in der Gr\u00f6\u00dfe der Webseite an.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&lt;img src=\u201c02_Bilder\/02.png\u201c style=\u201cwidth: 100%; max-width: 800px\u201c title=\u201c\u201c alt=\u201c\u201c class=\u201cbildlinks\u201c \/&gt;<\/li>\n<\/ul>\n\n\n\n<p>Wenn das Browserfenster verkleinert wird, wird die zoomf\u00e4hige Grafik mit-verkleinert. Eine Grafik ohne Zoom wird abgeschnitten\u2026<\/p>\n\n\n\n<p>F\u00fcr die Hintergrundgrafik braucht es keinen weiteren Eingriff, denn die Hintergrundgrafik wird schon skaliert und passt sich der Fenstergr\u00f6\u00dfe des Webbrowsers an.<\/p>\n\n\n\n<p><strong>Responsives Webdesign:<\/strong><\/p>\n\n\n\n<p>Das einzige was unsere Webseite noch nicht ist, sie ist noch nicht \u201cresponsiv\u201c. Die Webseite passt sich also noch nicht unterschiedlichen Ger\u00e4ten (Smartphone,Tablet) an. Mit dem Thema Responsives Webdesign wird sich aber erst ein sp\u00e4terer Artikel befassen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unsere Webseite soll nun eine Hintergrundgrafik bekommen und dieser Artikel beschreibt verschiedene M\u00f6glichkeiten der Gestaltung\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":2,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":361,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/266\/revisions\/361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}