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;
}
}