tag:forum.selfhtml.org,2005:/selfBackground-image - Hintergrundbild in HTML bzw. CSS – SELFHTML-Forum2016-06-27T09:47:03Zhttps://forum.selfhtml.org/self/2016/jun/26/background-image-hintergrundbild-in-html-bzw-css/1669837#m1669837Randy2016-06-26T08:32:38Z2016-06-26T08:32:38ZBackground-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#m1669839Carmen2016-06-26T08:41:24Z2016-06-26T08:41:24ZBackground-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#m1669840Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-06-26T08:41:54Z2016-06-26T08:41:54ZBackground-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#m1669844Randy2016-06-26T09:41:12Z2016-06-26T09:41:12ZBackground-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#m1669841Carmen2016-06-26T08:51:21Z2016-06-26T08:51:21ZBackground-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#m1669842ottogal2016-06-26T09:33:36Z2016-06-26T09:33:36ZBackground-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#m1669845Randy2016-06-26T09:42:49Z2016-06-26T09:53:25ZBackground-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#m1669843Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-06-26T09:40:40Z2016-06-26T09:40:40ZBackground-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#m1669854ottogal2016-06-26T14:21:17Z2016-06-26T14:24:29ZBackground-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#m1669846Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-06-26T09:56:46Z2016-06-26T09:56:46ZBackground-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#m1669857Matthias Apselmatthias.apsel@selfhtml.orghttp://brückentage.info2016-06-26T18:28:57Z2016-06-26T18:28:57ZBackground-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#m1669880ottogal2016-06-27T09:47:03Z2016-06-27T09:47:03ZBackground-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>