Editing CSS

Question

Hey all,
I am still learning css and I need some help. I am designing a websit from a template that has some really good css work. What i want to do is change the image of the computer on this page to a different image which i see is easy enough todo, but the problem is the image then changes on all the pages, because of the css.  So what i need to learn how to do is modify the css so that i only change the image on this one page instead on it changing on all the  pages. Below I have inserted a picture of the what this question is over I am showing the css on the side.
and here is a screen shot of the code view
I know this has to be a pretty simple thing to do I just dont know how to do it. So please help me out on this because you guys know your stuff and i dont.
thanks

Answer 1

ok now I am starting to better understand. I was looking at the html code and not the css code.
here is the css code
body {
    background-image: url(images/main-bg.jpg);
    background-repeat: repeat-x;
    background-color: #040404;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #CCC;
    font-family: Arial, Helvetica, sans-serif;
img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
#container {
    width: 1000px;
    margin: 0 auto;
.top-logo {
    height: 91px;
    padding: 0 0 0 27px;
    width: 263px;
    float: left;
    margin: 0 0 29px 0;
.header {
    height: 305px;
    width: 849px;
    margin: 0 0 0 76px;
    background-image: url(images/main_img.png);
    background-repeat: no-repeat;
    padding: 36px 0 0 0;
.header-corner {
    background-image: url(images/header-corner.gif);
    width: 11px;
    height: 269px;
    float: right;
.header-content {
    margin: 0px;
    padding: 29px 0 0 10px;
    float: left;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    width: 488px;
.header-shadow {
    background-image: url(images/header-shadow.gif);
    height: 39px;
    width: 849px;
.button-go {
    float: right;
    margin: 10px 0 0 0;
#content {
    margin: 0 0 30px 0;
    padding: 20px 20px 0 45px;
.about-column1 h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.footer-content {
    width: 955px;
    margin: 0 auto;
    padding: 15px 0 0 45px;
.footer-copyright {
    float: left;
    padding: 13px 0 0 0;
.footer-icon {
    float: left;
.content-img {
    margin: 0 10px 20px 0;
    padding: 0px;
    width: 110px;
    float: left;
.footer-icon ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
.footer-icon li {
    margin: 0px;
    padding: 0 2px 0 0;
    display: inline;
.content-column {
    width: 270px;
    margin: 0 55px 0 0;
    float: left;
.content-column01 {
    width: 265px;
    margin: 0 0px 0 0;
    float: left;
.content-column h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.content-column01 h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.about-column {
    float: right;
    width: 418px;
.about-column h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.about-column1 {
    float: left;
    width: 400px;
.about-column1 ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 3px;
.about-column1 li {
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 5px;
    padding: 0 0 0 14px;
    line-height: 18px;
.about-pix {
    margin: 0 10px 0 0;
    padding: 0px;
    float: left;
    height: 134px;
    width: 241px;
.header-txt {
    background-image: url(images/header-bg.gif);
    height: 269px;
    background-repeat: repeat-x;
    margin: 0px 0 0 332px;
.clearboth {
    clear: both;
.top-nav {
    width: 595px;
    float: right;
    margin: 36px 0 0 0;
.top-nav ul  {
    margin: 0px;
    padding: 0px;
.top-nav li  {
    display: inline;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
.footer {
    background-image: url(images/footer-bg.gif);
    height: 95px;
.txt-link {
    font-family: Headache;
    font-size: 12px;
    font-weight: normal;
    color: #FFF;
h1 {
    font-family: Headache;
    font-size: 28px;
    color: #FFF;
    font-weight: normal;
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    padding: 0px;
.contact-img {
    float: left;
    height: 137px;
    width: 140px;
    margin: 0 20px 0 0;
.txt-blank {
    color: #000;
.contact-column {
    float: left;
    width: 750px;
.contact-column ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
.form{
    padding: o;
    margin: 0;
div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
    width: 400px; /*width of form rows*/
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: auto;
div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
    float: left;
    width: 80px;
    margin-right: 15px; /*spacing with right column*/
div.thefield ul {
    margin: 0px;
    padding: 0px;
div.thefield li {
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0 6px 0 0;
div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
    float: left;
    margin-bottom: 10px; /* space following the field */
div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
    width: 230px;
div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
    width: 229px;
    height: 100px;
div.fieldwrapper div.thebig textarea {
    width: 400px;
    height: 100px;
div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
    width: 379px;
    text-align: left;
.contact-column li {
    background-image: url(images/icon-arrow.gif);
    background-repeat: no-repeat;
    background-position: left 5px;
    padding: 0 0 0 14px;
    line-height: 18px;
So how do I incorporate this line into that css code
*<style type="text/css">*
#divName {
background-image: url (some-BG-image.jpg);
background-repeat: no-repeat;
background-position: top left;
*</style>*
I am wanting to learn this because I have noticed that alot of templates use css and by me learning how to do this I can create many different page styles that are based on templates without totally destroying the css.