tag:forum.selfhtml.org,2005:/self Background-image - Hintergrundbild in HTML bzw. CSS – SELFHTML-Forum 2016-06-27T09:47:03Z https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669837#m1669837 Randy 2016-06-26T08:32:38Z 2016-06-26T08:32:38Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo, Forenmitglieder,</p> <p>ich habe eine Frage an HTML- und CSS-fitte User. Meine Homepage läuft nicht über ein CMS - dazu reichen meine PC-Kenntnisse und mein IT-Verständnis einfach nicht aus. Es ist schon sehr lang eher, dass ich mich da tiefer beschäftigt habe.</p> <p>Meine Website läuft noch über HTML und ein CSS. Ich wollte jetzt mal ein Hintergrundbild einbauen, dass nicht mitläuft, wenn man nach unten scrollt. Das Hintergrundbild soll ein Landschaftsbild sein - ungefähr 3000 bis 2000 Pixel gross - so dachte ich mir das zumindest mal aus.</p> <p>Kann mir jemand sagen, wie das Einbauen funktioniert? Muss ich das auf jeder einzelnen HTML-Seite im Body machen oder irgendwas im CSS einsetzen, dass dann für alle HTML-Seiten gilt? Wenn ja, wie geht das bzw. wie lautet der Code dafür?</p> <p>Über eine Rückmeldung freue ich mich.</p> <p>Viele Grüße</p> <p>randy</p> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669839#m1669839 Carmen 2016-06-26T08:41:24Z 2016-06-26T08:41:24Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo,</p> <p>du brauchst für das Hintergrundbild die CSS Eigenschaft " background-attachment: fixed;"</p> <p><a href="http://www.w3schools.com/cssref/pr_background-attachment.asp" rel="nofollow noopener noreferrer">http://www.w3schools.com/cssref/pr_background-attachment.asp</a></p> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669840#m1669840 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-06-26T08:41:54Z 2016-06-26T08:41:54Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo Randy,</p> <blockquote> <p>Meine Website läuft noch über HTML und ein CSS.</p> </blockquote> <p>Webseiten laufen immer über HTML und CSS ;-)</p> <blockquote> <p>Ich wollte jetzt mal ein Hintergrundbild einbauen, dass nicht mitläuft, wenn man nach unten scrollt. Das Hintergrundbild soll ein Landschaftsbild sein - ungefähr 3000 bis 2000 Pixel gross - so dachte ich mir das zumindest mal aus.</p> </blockquote> <p>Das ist eine ganz schlechte Idee. Solch große Bilder verbraten Bandbreite ohne Ende, nur damit sie auf den meisten Endgeräten wieder skaliert werden. Kaum jemand nutzt seinen Browser in solch großen Vollbildauflösungen.</p> <blockquote> <p>Kann mir jemand sagen, wie das Einbauen funktioniert?</p> </blockquote> <p>Schau mal ins Wiki. <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder" rel="nofollow noopener noreferrer">HTML/Tutorials/responsive_Bilder</a></p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669844#m1669844 Randy 2016-06-26T09:41:12Z 2016-06-26T09:41:12Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo Carmen,</p> <p>Danke für den Hinweis. Ich probiere es mal aus.</p> <p>Gruß randy</p> <blockquote> <p>Hallo,</p> <p>du brauchst für das Hintergrundbild die CSS Eigenschaft " background-attachment: fixed;"</p> <p><a href="http://www.w3schools.com/cssref/pr_background-attachment.asp" rel="nofollow noopener noreferrer">http://www.w3schools.com/cssref/pr_background-attachment.asp</a></p> </blockquote> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669841#m1669841 Carmen 2016-06-26T08:51:21Z 2016-06-26T08:51:21Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo,</p> <blockquote> <p>Das ist eine ganz schlechte Idee. Solch große Bilder verbraten Bandbreite ohne Ende, nur damit sie auf den meisten Endgeräten wieder skaliert werden. Kaum jemand nutzt seinen Browser in solch großen Vollbildauflösungen.</p> </blockquote> <p>so ein großes Bild kannst du ohne Probleme mit einem Grafikprogramm wie z.B. Photoshop auf unter 100kb runter rechnen, hier reden wir absolut nicht von großen Datenmengen.</p> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669842#m1669842 ottogal 2016-06-26T09:33:36Z 2016-06-26T09:33:36Z Background-image - Hintergrundbild in HTML bzw. CSS <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder" rel="nofollow noopener noreferrer">HTML/Tutorials/responsive_Bilder</a></p> </blockquote> <p>In der Einleitung dieses Artikels sollte jemand folgenden "Satz" überarbeiten:</p> <blockquote> <p>Hier müssen Webdesigner eine Banace zwischen dem optimalen bild in HD-Qualität und einer benutzerfreundlichen Seite, die ihre Inhalte schnell und unkompliziert zur Verfügung stellt.</p> </blockquote> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669845#m1669845 Randy 2016-06-26T09:42:49Z 2016-06-26T09:53:25Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo Matthias,</p> <p>Danke für den Tipp. Viell. lasse ich das dann doch besser bleiben mit dem Backgroundbild.</p> <p>Es hat eh nicht funktioniert.</p> <p>Ich hatte in meiner CSS-Datei mal Folgendes eingegeben.</p> <p>Aber es erscheint gar kein Hintergrundbild ;-)</p> <pre><code class="block language-css"><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span>Tahoma<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span>13px<span class="token punctuation">;</span> <span class="token property">line-height</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span>#333333<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span>#EEEEEE<span class="token punctuation">;</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>../images/DSC00451.JPG<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Gruß randy</p> <blockquote> <p>[Vollzitat entfernt]</p> </blockquote> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669843#m1669843 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-06-26T09:40:40Z 2016-06-26T09:40:40Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo ottogal,</p> <blockquote> <blockquote> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Bilder" rel="nofollow noopener noreferrer">HTML/Tutorials/responsive_Bilder</a> In der Einleitung dieses Artikels sollte jemand folgenden "Satz" überarbeiten:</p> </blockquote> </blockquote> <p>Auch du kannst ein <em>Jemand</em> sein.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669854#m1669854 ottogal 2016-06-26T14:21:17Z 2016-06-26T14:24:29Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Ok, habs mal umformuliert:</p> <blockquote> <p>Hier müssen Webdesigner eine Balance finden zwischen dem optimalen Bild in HD-Qualität und einer benutzerfreundlichen Seite, die ihre Inhalte schnell und unkompliziert zur Verfügung stellt.</p> </blockquote> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669846#m1669846 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-06-26T09:56:46Z 2016-06-26T09:56:46Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo Randy,</p> <blockquote> <p>Ich hatte in meiner CSS-Datei mal Folgendes eingegeben.</p> <p>Aber es erscheint gar kein Hintergrundbild ;-)</p> </blockquote> <p>Prüfe, ob der Pfad zum Bild korrekt ist. Relative Pfadangaben beziehen sich auf die CSS-Ressource, nicht auf das HTML-Dokument.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669857#m1669857 Matthias Apsel matthias.apsel@selfhtml.org http://brückentage.info 2016-06-26T18:28:57Z 2016-06-26T18:28:57Z Background-image - Hintergrundbild in HTML bzw. CSS <p>Hallo ottogal,</p> <blockquote> <p>Ok, habs mal umformuliert:</p> </blockquote> <p>Danke. Du hättest das auch ohne Registrierung tun können. Die Tatsache, dass du dich registriert hast, lässt mich auf weitere Beiträge hoffen. ;-)</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Dieses Forum nutzt Markdown. Im <a href="https://wiki.selfhtml.org" rel="nofollow noopener noreferrer">Wiki</a> erhalten Sie <a href="https://wiki.selfhtml.org/wiki/SELFHTML:Forum/Formatierung_der_Beitr%C3%A4ge" rel="nofollow noopener noreferrer">Hilfe bei der Formatierung Ihrer Beiträge</a>. </div> https://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669880#m1669880 ottogal 2016-06-27T09:47:03Z 2016-06-27T09:47:03Z Background-image - Hintergrundbild in HTML bzw. CSS <blockquote> <p>Danke. Du hättest das auch ohne Registrierung tun können.</p> </blockquote> <p>Wusste ich nicht...</p> <blockquote> <p>Die Tatsache, dass du dich registriert hast, lässt mich auf weitere Beiträge hoffen. ;-)</p> </blockquote> <p>;-))</p>