This is my CSS file. Can anyone tell me how to change it so that every page will have a different background image.



/*--------------------------------------------------------------
				=Reset default browser CSS.
The goal of a reset stylesheet is to reduce browser
inconsistencies in things like default line heights, margins and
font sizes of headings, and so on.
--------------------------------------------------------------*/

html, body, div, span, h1, h2, h3, p, a, i, font, strong, ol, ul, li, form, label, caption {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
/* Remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
caption {
	font-weight: normal;
	text-align: left;
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

/*-----------------------------------------------
					=Structure
-----------------------------------------------*/
/* This is for the screen
   The CSS padding properties define the space between the element border and the element content. */
body {
	padding: 0;
}
/* This is for the page on that screen
   The CSS margin properties define the space around elements. */
#page {
	margin: 1em auto;
	/* This means that the page max-width is 1000 pixels width. */
	max-width: 1000px;
}
/* This is for the text in the header */
#branding hgroup {
	margin: 0;
	padding: 0;
}
/* This is for the text in the menu "ribbon". */
#access div {
	margin: 0;
	padding: 0;
}
/* With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
   This is the content os the left side. */
#primary {
	float: left;
	/* Old value
	margin: 0 -26.4% 0 0; */
	margin: 0;
	width: 60%;
	padding: 0;
}
/* This is for the text in the page (the actual content) on the left side.
   The parameters are linked to #primary. So width is 100% of the #primary width. */
#content {
	/* Old value
	margin: 0 34% 0 7.6%; */
	margin: 0 0 0 30px;
	padding: 0;
	width: 100%;
}
/* This is for the links on the right side */
#secondary {
	float: right;
	/* Old value
	margin: 0 7.6% 0 0; */
	margin: 0;
	/* Old value
	width: 18.8%; */
	/* 30% of the #page width */
	width: 30%;
	background-color: White;
}

/*-----------------------------------------------
					=Global
-----------------------------------------------*/
body, input, textarea {
	color: #373737;
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
/* This is for the whole screen */
body {
	background-color: #e2e2e2;
	/* I set the background image in the designer (Appearance/Background).
	background-image: url(images/Ireland5.jpg);
	background-repeat: repeat;
	background-position: center top; */
}
/* This is for the part of the page where the text is */
#page {
	/*This is the original color
	background: #fff;*/
	background-color: #4169E1;
	background-image: url(images/Lightning8.jpg);
	background-repeat: repeat;
	background-position: center top;
}
/* Headings */
h1,h2,h3 {
	clear: both;
}

/* Text elements */
p {
	margin-bottom: 1.625em;
}
ul {
	list-style: circle;
	margin: 0;
	padding: 0;
}
ol {
	list-style-type: decimal;
	margin: 0;
	padding: 0;
}
li {
	margin: 0;
	padding: 0;
}
strong {
	font-weight: bold;
}
i {
	font-style: italic;
}

/* Links */
a {
	color: #1982d1;
	text-decoration: none;
}
a:focus,
a:active,
a:hover {
	text-decoration: underline;
}

/*-----------------------------------------------
					=Header
-----------------------------------------------*/
#branding {
	/* This is original definition. It is for the header border.
	border-top: 2px solid #bbb; */
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#branding img {
	height: auto;
	margin: -50px 0 -7px 0;
	padding: 0;
	width: 100%;
}

/* This is for the title */
#site-title {
	margin: 0 0 0 20px;
	padding: 10px;
}
#site-title a {
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {
	color: #1982d1;
	text-decoration: underline;
}
#site-description {
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}

/*-----------------------------------------------
					=Menu
-----------------------------------------------*/
/* This is for the menu "ribbon". */
#access {
	background: #222; /* Show a solid color for older browsers */
	clear: both;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}
/* For the actual menu items. */
#access ul {
	font-size: 13px;
	list-style: none;
	margin: 0 0 0 20px;
	padding: 0;
}
/*This is how the text in the menu is positioned. */
#access li {
	float: left;
	position: relative;
}
/* This is for the actual menu item. */
#access a {
	/* Display color of the  menu item. */
	color: #FF0000;
	/* How the  menu item is displayed when you go over it. */
	display: block;
	/* This is the height of the black "ribbon" of the menu items. */
	line-height: 3em;
	padding: 0 1em;
	text-decoration: none;
}
#access li:hover > a {
	/* This is the color of the menu item when you go over it. */
	color: #373737;
	/* This is the background color of the menu item when you go over it. */
	background-color: Lime;
}
/* When you click on the menu item it goes to that page and menu item is bold, so that you know what is selected. */
#access .current-menu-item > a {
	font-weight: bold;
}

/*-----------------------------------------------
					=Content
-----------------------------------------------*/
/* This is for the content in the page */
#main {
	clear: both;
	padding: 1em 0 0 0;
	margin: 0;
}
/* This is for the bottom of the page. */
.hentry {
	border-bottom: none;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
	position: relative;
}
/* It displays a border line in the bottom of the page. */
.hentry:last-child {
	border-bottom: none;
}
/* Edit button. */
.entry-meta .edit-link a {
	background: #eee;
	-moz-border-radius: 3px;
	color: #666;
	float: right;
	font-size: 12px;
	line-height: 1.5em;
	padding: 0 8px;
}
/* Color of the text and background when you go over it by mouse. */
.entry-meta .edit-link a:hover {
	background: #888;
	color: #FFFF00;
}

/*-----------------------------------------------
					Images
-----------------------------------------------*/
/* Fluid images for posts, comments, and widgets */
.entry-content img,
.widget img {
	max-width: 90%;
}
/* Make sure images with WordPress-added height and width attributes are scaled correctly */
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
	height: auto;
}
img.size-full,
img.size-large {
	max-width: 90%;
	width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
	height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
/* Properties of the gallerey. */
.gallery-caption {
	color: #FFFF00;
	font-family: Georgia, serif;
	font-size: 12px;
}

/* Image borders */
img[class*="align"],
img[class*="wp-image-"],
#content .gallery .gallery-icon img {
	border: 1px solid #C71585;
	/* It means that there is no border around the images.
	border: none; */
	padding: 0;
	margin: 0;
}
/* Add some useful style to those fancy borders for linked images ...
   It is seen when you go over with a mouse. */
a:focus img[class*="align"],
a:hover img[class*="align"],
a:active img[class*="align"],
a:focus img[class*="wp-image-"],
a:hover img[class*="wp-image-"],
a:active img[class*="wp-image-"],
#content .gallery .gallery-icon a:focus img,
#content .gallery .gallery-icon a:hover img,
#content .gallery .gallery-icon a:active img {
	background: #BDB76B;
	border-color: #BDB76B;
}

/*-----------------------------------------------
					=Widgets
-----------------------------------------------*/
/* This is on the right side of the page */
.widget-area {
	font-size: 12px;
	width: auto;
}
.widget {
	clear: both;
	margin: 0 0 0 0;
}
.widget-title {
	color: #666;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0;
}
/* Where the link starts and how big the font is */
.widget ul {
	font-size: 12px;
	margin: 0 0 0 1.2em;
}
/* This is for the description of the link */
.widget ul li {
	color: #777;
	font-size: 12px;
}
/* This is for the actual link */
.widget a {
	font-weight: bold;
	text-decoration: none;
}
.widget a:hover,
.widget a:focus,
.widget a:active {
	text-decoration: underline;
}

/*-----------------------------------------------
					=Footer
-----------------------------------------------*/
#colophon {
	clear: both;
}

/*-----------------------------------------------
				=Responsive Structure
-----------------------------------------------*/
@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
	body, input, textarea {
		font-size: 10px;
	}
	#site-title a {
		font-size: 24px;
	}
	#site-description {
		font-size: 10px;
	}
	#access ul {
		font-size: 10px;
	}
	.entry-title {
		font-size: 20px;
	}
		
	/* Reposition the site title and description slightly */
	#site-title {
		padding: 5.30625em 0 0;
	}
	#site-title,
	#site-description {
		margin-right: 0;
	}
}