CSS image change help needed!
OK, so I am in way over my head. I have been able to change a few things on a css file for some web pages a client needs help with. I know VERY LITTLE about css / html in general. Usually I can stumble my way through it through trial and error, but in this instance I don't have much time.
I need to be able to swap a main image that is called up in the CSS (img_banner.jpg)... this needs to change for each page. Right now they are using the same image for each page, but now each page will need to have a new image (img_banner.jpg, img_banner2.jpg, img_banner3.jpg, ...).
How is this done with the CSS? I hope I have made myself clear, and I hope I have posted in the right place. I have copied the top portion of the code below of the CSS.
Desperate!! Any help will be greatly appreciated!
body {
font:normal 12px Arial, Helvetica, sans-serif;
background:url(../images/body_bg.jpg) repeat-x left top;
margin:0 auto;
color:#6e9bad;
}
/*Reset Styles!*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
img { float:left; }
.clear { clear:both; }
.img_right { float:right; }
.bottom_padding{
padding:0 0 15px 0;
}
.line_height{
line-height:25px;
}
/*Main Container*/
#container {
clear:both;
width:932px;
margin:0 auto;
}
/*Header*/
#header {
width:932px;
float:left;
}
/*Top Area */
#top {
background:url(../images/top_bg.jpg) repeat-x left top;
width:905px;
padding:0 0 33px 0;
float:right;
}
.logo {
margin:47px 0 0 9px;
}
#top h2 {
float:left;
font:bold 20px "Trebuchet MS";
color:#63340a;
padding:64px 0 0 106px;
}
.space {
padding:0 0 0 47px;
}
#top h3 {
float:right;
width:214px;
font:normal 12px Arial, Helvetica, sans-serif;
padding:52px 0 0 0;
}
#top h3 strong {
background:url(../images/img_phone.jpg) no-repeat left top;
color:#87afbf;
font-weight:bold;
padding:0 0 2px 25px;
margin:0 0 5px 0;
float:left;
}
#top h3 u {
color:#63340a;
font:bold 25px Arial, Helvetica, sans-serif;
clear:both;
margin:0 0 8px 0;
float:left;
text-decoration:none;
}
#top h3 label {
color:#87afbf;
float:left;
width:214px;
}
/*Navigation-banner*/
#nav-banner {
width:932px;
float:left;
padding:0 0 6px 0;
}
.space2 {
padding:0 0 0 5px;
}
.space3 {
padding:0 0 0 9px;
}
#banner {
width:704px;
float:left;
}
#banner span {
background:url(../images/img_banner.jpg) no-repeat left top;
width:201px;
float:left;
margin:0 0 0 9px;
font:bold 14px Arial, Helvetica, sans-serif;
color:#FFFFFF;
padding:226px 0 20px 300px;
}
/*Left Navigation*/
#left_navigation {
background:url(../images/img_left_nav.jpg) no-repeat left bottom;
width:227px;
float:left;
}
#left_navigation_inner {
background:url(../images/img_left_nav_rpt.jpg) repeat-y left;
width:201px;
float:right;
height:278px;
}
#left_navigation_inner ul {
float:left;
font:bold 12px Arial, Helvetica, sans-serif;
color:#FFFFFF;
width:195px;
padding:0 0 17px 0;
}
#left_navigation_inner li {
background:url(../images/img_left_nav_sep.jpg) no-repeat 5px bottom;
list-style:none;
padding:8px 0 7px 16px;
line-height:16px;
}
#left_navigation_inner li a:link, #left_navigation_inner li a:visited, #left_navigation_inner li a:active {
color:#FFFFFF;
text-decoration:none;
}
#left_navigation_inner li a:hover {
color:#CCFFFF;
text-decoration:none;
}