Your page starts off like this: (your can be more specific to your needs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 26 Jul 2010 21:13:19 GMT">
<meta name="author" content="David Wilson" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revised" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/css3styles.css" type="text/css" media="screen" charset="utf-8" />
<!--[if IE]>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title></title>
<style type="text/css">
</style>
</head>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Mon, 26 Jul 2010 21:13:19 GMT">
<meta name="author" content="David Wilson" />
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="revised" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/css3styles.css" type="text/css" media="screen" charset="utf-8" />
<!--[if IE]>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title></title>
<style type="text/css">
</style>
</head>
Now you have 2 choices, you have the linked css file or the section between the <style></style> tags, my preference is to go between the tags because i can rapidly make changes until I get the effect i want, then move the code into the css file.
So now onto the background, for the site we want a complete background for the page, so the <body> tag seems good.
so between the style and /style tag i put:
body {background-image:url('images/background.png'); }
this will take the graphic in the images folder background.png and start tilling it across as well as down the page.
if i just wanted to to go across the top i would add one more thing:
body {background-image:url('images/background.png'); background-repeat:repeat-x; }
if i wanted it just to go down the left side of the page i would change the x to a y
body {background-image:url('images/background.png'); background-repeat:repeat-y; }
if i didn't want it to tile at all, just one image
body {background-image:url('images/background.png'); background-repeat:no-repeat; }
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
