<?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>Wed, 08 Feb 2012 09:58:19 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</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</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 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 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 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 href="http://wishu-blog.net/2009/05/video-barrierefreies-webdesign/" title="Permanent link to Video: Barrierefreies Webdesign">Video: Barrierefreies Webdesign</a>  </li>
<li> <a 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>
<li> <a href="http://wishu-blog.net/2012/01/34-grid-builder-per-drag-drop-das-eigene-layout-erstellen/" title="Permanent link to 3×4 Grid Builder – Per Drag &#038; Drop das eigene Layout erstellen">3×4 Grid Builder – Per Drag &#038; Drop das eigene Layout erstellen</a>  </li>
<li> <a href="http://wishu-blog.net/2012/01/keine-kategorie-mehr-vergessen-category-reminder-fuer-wordpress/" title="Permanent link to Keine Kategorie mehr vergessen – Category Reminder für WordPress">Keine Kategorie mehr vergessen – Category Reminder für WordPress</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>

