<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Wishu-Blog &#187; Background</title>
	<atom:link href="http://wishu-blog.net/tag/background/feed/" rel="self" type="application/rss+xml" />
	<link>http://wishu-blog.net</link>
	<description>Tipps &#38; Tricks zum Thema Webdesign und Webdevelopment</description>
	<lastBuildDate>Tue, 22 May 2012 19:17:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Kurzschreibweisen in CSS – Heute: Hintergründe</title>
		<link>http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-hintergrunde/</link>
		<comments>http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-hintergrunde/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 09:00:55 +0000</pubDate>
		<dc:creator>Wishu Kaiser</dc:creator>
				<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Background]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Kurzschreibweise]]></category>
		<category><![CDATA[Ladezeiten]]></category>

		<guid isPermaLink="false">http://wishu-blog.net/?p=889</guid>
		<description><![CDATA[Vor ein paar Wochen habe ich euch gezeigt, wie man etwas Code sparen kann, wenn es um die Eigenschaften margin, padding und die diversen border-Eigenschaften geht. Heute möchte ich euch zeigen, wie man beim Hintergrund so einiges an Code sparen &#8230; <a href="http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-hintergrunde/">Weiterlesen <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft" title="CSS" src="http://wishu-blog.net/wp-content/uploads/2009/06/200px-csssvg.png" alt="" width="130" height="146" />Vor ein paar Wochen habe ich euch gezeigt, wie man etwas Code sparen kann, wenn es um die Eigenschaften margin, padding und die diversen border-Eigenschaften geht. Heute möchte ich euch zeigen, wie man beim Hintergrund so einiges an Code sparen kann. Für den Hintergrund gibt es im CSS fünf Eigenschaften, welche allerdings alle in einer Eigenschaft zusammen gefasst werden könnten.</p>
<p>Die Eigenschaft <strong>background</strong> ist eine Allround-Eigenschaft, welche alle anderen Eigenschaften enthalten kann um somit Code zu sparen und erneut die Ladezeiten zu verringern.</p>
<p><span id="more-889"></span>Wie bereits erwähnt, gibt es fünf Eigenschaften im CSS, welche zu background gehören. Allerdings können diese fünf ohne Probleme in die zusätzliche sechste Eigenschaft eingebunden werden.  Hier noch einmal die 5 Eigenschaften im Überblick:</p>
<ul>
<li><strong>background-attachment </strong>– Bestimmt ob das Hintergrundbild beim scrollen mitwandert.</li>
<li><strong>background-color</strong> – Bestimmt die Hintergrundfarbe<strong>.<br />
</strong></li>
<li><strong>background-image</strong> – Bestimmt das Hintergrundbild</li>
<li><strong>background-position</strong> – Bestimmt die Position des Hintegrundbildes</li>
<li><strong>background-repeat</strong> – Bestimmt ob und in welche Richtung der Hintergrund wiederholt werden soll.</li>
</ul>
<p>Allein die Eigenschaftsnamen verbrauchen schon mehr – bei <em>background-attachment</em> ist es sogar mehr als das doppelte, als bei <em>background</em>. Das kann man ganz einfach umgehen. Denn mit der Eigenschaft background kann man sich diesen Code sparen und alle in eine Zeile tun.</p>
<p>Hier mal wieder ein Vergleich, wie es aussehen kann, wenn man alle 5 Eigenschaften benutzt:</p>
<pre><code>background-attachment:fixed;
background-color:#123456;
background-image:url(images/bg.gif);
background-position:bottom right;
background-repeat:no-repeat;</code></pre>
<p>Allein diese Angaben verbrauchen 158Byte. Das geht eindeutig platzsparender. Mit der Eigenschaft <em>background</em> sieht das Ganze so aus:</p>
<pre><code>background:#123456 url(images/bg.gif) bottom right fixed no-repeat;
</code></pre>
<p>Die Zeile ist natürlich länger, dafür werden aber nur 67Byte verbraucht, Das ist eine Ersparnis von 91 Byte oder auch 57,59% (sollte ich mich nicht schon wieder verrechnet haben). Das sind sogar noch 10% mehr als bei den Richtungen von margin, padding und den border-Eigenschaften.</p>
<p>Die Reihenfolge, welche ich hier gewählt habe, hat nichts zu bedeuten, das ist einfach die Reihenfolge, an die ich mich gewöhnt habe.</p>
<p>Ich hoffe ich konnte euch erneut helfen euren Code etwas zu entschlacken um Ladezeiten einzusparen.</p>
<p>Das war es dann auch schon wieder!<br />
Euer Wishu</p>
<div class="betterrelated"><p><h3>Weitere Beiträge, die dich interessieren könnten</h3></p>
<ol><li> <a target="_blank" href="http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-richtungen/" title="Permanent link to Kurzschreibweisen in CSS – Heute: Richtungen">Kurzschreibweisen in CSS – Heute: Richtungen</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2011/04/css3-patterns-gekachelte-hintergrunde-noch-einfacher/" title="Permanent link to CSS3 Patterns – gekachelte Hintergrunde noch einfacher">CSS3 Patterns – gekachelte Hintergrunde noch einfacher</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/05/bgpatterns-gekachelte-hintergrunde-leicht-gemacht/" title="Permanent link to BgPatterns – gekachelte Hintergründe leicht gemacht">BgPatterns – gekachelte Hintergründe leicht gemacht</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2012/03/the-responsinator-responsive-webdesign-kinderleicht-am-pc-testen/" title="Permanent link to The Responsinator – Responsive Webdesign kinderleicht am PC testen">The Responsinator – Responsive Webdesign kinderleicht am PC testen</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/05/video-barrierefreies-webdesign/" title="Permanent link to Video: Barrierefreies Webdesign">Video: Barrierefreies Webdesign</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2009/06/ende-der-blogparade-%e2%80%93-wie-kam-ich-zum-webdesign/" title="Permanent link to Ende der Blogparade – Wie kam ich zum Webdesign?">Ende der Blogparade – Wie kam ich zum Webdesign?</a>  </li>
<li> <a target="_blank" href="http://wishu-blog.net/2012/01/einmal-html5-bitte-html5please-us/" title="Permanent link to Einmal HTML5 bitte – HTML5Please.us">Einmal HTML5 bitte – HTML5Please.us</a>  </li>
</ol></div>]]></content:encoded>
			<wfw:commentRss>http://wishu-blog.net/2009/07/kurzschreibweisen-in-css-%e2%80%93-heute-hintergrunde/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

