<?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>css-3Blog &#187; background</title>
	<atom:link href="http://www.css-3.hu/tag/background/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.css-3.hu</link>
	<description>Ez a blog elsősorban a CSS 3-ról szól, amely a CSS stílusleíró nyelv legújabb verziója.</description>
	<lastBuildDate>Wed, 16 Mar 2011 17:25:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>CSS hátterek</title>
		<link>http://www.css-3.hu/2010/04/css-hatterek/</link>
		<comments>http://www.css-3.hu/2010/04/css-hatterek/#comments</comments>
		<pubDate>Thu, 08 Apr 2010 10:24:29 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Nincs kategorizálva]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[CSS 2.1]]></category>
		<category><![CDATA[CSS alapok]]></category>

		<guid isPermaLink="false">http://www.css-3.hu/?p=262</guid>
		<description><![CDATA[A CSS alapjaival foglalkozó sorozat jelenlegi részében a CSS segítségével megvalósítható hátterekkel foglalkozunk. Háttere szinte minden DOM entitásnak lehet, de talán legtöbbször a body illetve a div elemekhez szoktunk hátteret beállítani. A beállításhoz a CSS background tulajdonságának különböző variációira lesz szükségünk.
A background-color segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet [...]]]></description>
			<content:encoded><![CDATA[<p>A CSS alapjaival foglalkozó sorozat jelenlegi részében a CSS segítségével megvalósítható hátterekkel foglalkozunk. Háttere szinte minden DOM entitásnak lehet, de talán legtöbbször a <em>body</em> illetve a <em>div</em> elemekhez szoktunk hátteret beállítani. A beállításhoz a CSS <em>background</em> tulajdonságának különböző variációira lesz szükségünk.<span id="more-262"></span></p>
<p>A <em>background-color</em> segítségével beállíthatjuk a háttér színét. Ez főleg akkor hasznos, ha nem valamilyen képet akarunk beállítani háttérként vagy fennáll annak a lehetősége, hogy a háttérként beállítani kívánt kép mérete nem éri el a teljes kitöltendő területet, és a kép által nem takart rész színét mi akarjuk meghatározni. A legfontosabb az, hogy mindig ügyeljünk a háttér és a tartalom kontrasztjára, mert a fekete alapon sötétszürke betűk &mdash; és még rengeteg további példát sorolhatnék &mdash; olvasása rendkívül fárasztó, így látogatóink otthagyják az oldalt akármennyire érdekes is a tartalom. A következő beállítással például feketére állíthatjuk az egész oldal hátterét:</p>
<pre class="brush: css">
body {
background-color: black;
}
</pre>
<p>A <em>background-image</em> tulajdonság beállításával egy képet használhatunk háttérként. Mivel háttérképről van szó, ezért célszerű olyan képet választani, amely nem vonja el a figyelmet a tartalomról. Ehhez általában az kell, hogy a kép ne legyen nagyon harsány, lehetőleg legyen homogén és elegendő kontraszt maradjon közte és a tartalom között. A következő példa egy szakasz háttérképét állítja be:</p>
<pre class="brush: css">
div {
background-image: url(background.jpg);
}
</pre>
<p>A <em>background-repeat</em> segítségével adhatjuk meg, hogy a <em>background-image</em>-ként beállított háttérkép ismétlődjön-e vagy sem. A <em>repeat</em>, a <em>repeat-x</em>, a <em>repeat-y</em> és a <em>no-repeat</em> beállítások közül választhatunk. A <em>repeat</em> megadásával a képet &#8211; ha az kisebb, mint az elem, aminek a hátterének beállítottuk &#8211; mind függőlegesen, mind vízszintesen ismétli úgy, hogy az elemet teljesen lefedje. A <em>no-repeat</em> ennek pontosan az ellenkezője: nem ismétli meg a képet, akkor sem, ha így az elem valamekkora része háttérkép nélkül marad. Ilyenkor a képpel nem fedett rész a <em>background-color</em> tulajdonság által megadott színű, vagy ennek hiányában alapértelmezett színű (általában fehér). A <em>repeat-x</em> csak vízszintesen, a <em>repeat-y</em> pedig csak függőlegesen ismétli a beállított háttérképet. A következő beállítás nem ismétli a háttérképet:</p>
<pre class="brush: css">
body {
background-repeat: no-repeat;
}
</pre>
<p>Háttérképünknek nem kötelező az alapértelmezés szerinti középen lennie. A <em>background-position</em> beállításával megadhatjuk, hogy a háttérkép hova kerüljön. A beállításnál a <em>top</em>, <em>bottom</em>, <em>center</em>, <em>left</em> és <em>right</em> lehetőségeken kívül pontos értéket vagy százalékot is megadhatunk. A következő példa a háttérképet balra, és az elem tetejéhez képest 10 pixellel lejjebb igazítja:</p>
<pre class="brush: css">
div {
background-position: left 10px;
}
</pre>
<p>A végére hagytam a legérdekesebbet, a <em>background-attachment</em> tulajdonságot. Két beállítási lehetősége van: a <em>scroll</em> és a <em>fixed</em>. Ha a <em>scroll</em> van beállítva &#8211; ez az alapértelmezett -, akkor az elem görgetésével annak háttere is vele együtt mozog. A <em>fixed</em> beállítás esetén viszont a háttér helyben marad, és görgetéskor csak a tartalom mozog. A fixed beállítás ízléses alkalmazása sokszor feldobja az oldal összhatását. A következő példa rögzíti az oldal hátterét:</p>
<pre class="brush: css">
body {
background-attachment: fixed;
}
</pre>
<p>Ha szeretünk rövidíteni, használjuk a <em>background</em> tulajdonságot, amely lehetőséget ad a fentiek egyszerre való beállítására. A sorrend ilyenkor a következő kell legyen: <em>background-color</em>, <em>background-image</em>, <em>background-repeat</em>, <em>background-attachment</em>, <em>background position</em>. Például:</p>
<pre class="brush: css">
body {
background: black url(background.jpg) no-repeat fixed left 10px;
}
</pre>
<p>A fent bemutatott background-tulajdonságok minden elterjedt böngésző esetében használhatóak.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.css-3.hu/2010/04/css-hatterek/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

