﻿<?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>Jason Barton &#187; Code</title>
	<atom:link href="http://www.jasonbarton.co.uk/tag/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jasonbarton.co.uk</link>
	<description>Website Designer, Internet Host and Consultant</description>
	<lastBuildDate>Fri, 17 Jul 2009 18:07:03 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Coding Page Backgrounds in CSS for beginners</title>
		<link>http://www.jasonbarton.co.uk/2009/05/coding-page-backgrounds-in-css-for-beginners/#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed</link>
		<comments>http://www.jasonbarton.co.uk/2009/05/coding-page-backgrounds-in-css-for-beginners/#comments</comments>
		<pubDate>Thu, 21 May 2009 17:51:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Techy Stuff]]></category>
		<category><![CDATA[Backgrounds]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Images]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.jasonbarton.co.uk/?p=267</guid>
		<description><![CDATA[Background images can add a lot to the visual impact of a webpage. In this post I will demonstrate using CSS how to:

position a background image
specify whether to repeat (tile) or show the image only once
fix the background image so that it stays stationary when the page is scrolled

Positioning a Background Image
This snippet of CSS [...]]]></description>
			<content:encoded><![CDATA[<h4>Background images can add a lot to the visual impact of a webpage. In this post I will demonstrate using CSS how to:</h4>
<ul>
<li><a href="#Positioning a Background Image#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">position a background image</a></li>
<li>specify whether to <a href="#Repeat a Background Image#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">repeat (tile)</a> or <a href="#Show a Background Image Once#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">show the image only once</a></li>
<li><a href="#Fix a Background Image#utm_source=feed&amp;utm_medium=feed&amp;utm_campaign=feed">fix the background image so that it stays stationary when the page is scrolled</a></li>
</ul>
<h2><a name="Positioning a Background Image"></a>Positioning a Background Image</h2>
<p>This snippet of CSS will place a background image at the top left of the browser screen:<br />
<code>#body {<br />
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');<br />
background-position: left top;<br />
}</code></p>
<p>The first term after background image specifies the x-axis position, and the second the y-axis. Using simple english, you can specify the position as follows:<br />
<code>background-position: left top;<br />
background-position: right bottom;<br />
background-position: center center;</code></p>
<p>or you can specify position in pixels: <code>background-position: 75px 25px;</code></p>
<p>or a percentage of the display size of the browser: <code>background-position: 30% 40%;</code></p>
<h2><a name="Repeat a Background Image"></a>Repeat a Background Image</h2>
<p>To repeat or tile a background image use the following code:  <br />
<code>#body {<br />
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');<br />
background-repeat: repeat;<br />
}<br />
</code></p>
<p>You can also repeat along the x-axis only using <code>repeat-x</code>, or along the y axiz only using <code>repeat-y</code></p>
<h2><a name="Show a Background Image Once"></a>Show a background image once only</h2>
<p>We use the code <code>background-repeat: no-repeat;</code> to specify that the background image should only be used once:<br />
<code>#body {<br />
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');<br />
background-repeat: no-repeat;<br />
}</code></p>
<h2><a name="Fix a Background Image"></a>Fix a Background Image</h2>
<p>So that the background image does not move when the page is scrolled, we use <code>background-attachment:fixed;</code>:</p>
<p><code>#body {<br />
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');<br />
background-attachment:fixed;<br />
}</code></p>
<h2>Combining the above</h2>
<p>We can of course combine various attributes to one image, for example:<br />
<code>#body {<br />
background-image:url('http://[URL OF YOUR BACKGROUND IMAGE HERE]');<br />
background-repeat: no-repeat;<br />
background-attachment:fixed;<br />
background-position:left bottom;<br />
}</code></p>
<h2>Note re embedded CSS vs Stylesheets</h2>
<p>I have assumed that you are embedding CSS in a style sheet rather than embedding CSS in your web-page.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jasonbarton.co.uk/2009/05/coding-page-backgrounds-in-css-for-beginners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
