Displaying wordpress background images different to each static page

I am trying to add different bg image to each wordpress page. http://www.designstest.co.uk/print-quote

Here is the code I’m using:

    <?php
$class = '';
if (is_page('print-quote')) {
  $class = 'main_image_quote';
} elseif (is_page('case-studies')) {
  $class = 'main_image_case';
} elseif (is_page('contact')) {
  $class = 'main_image_contact';
} elseif (is_page('services')) {
  $class = 'main_image_services';
} elseif (is_page('news')) {
  $class = 'main_image_news';
} elseif (is_page('suppliers')) {
  $class = 'main_image_suppliers';
} ?>
<div id="main_image" <?php if($class) echo ' class=' . $class . '"'; ?>>

and css:

#main_image {
background: url(images/SRPM-Home-Page-Background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main_image.main_image_quote {
background-image: url(images/SRPM-Print-Quote-Page-Background.png);
}
    #main_image.main_image_case {
background-image: url(images/SRPM-Case-Studies-Clients-Page-Background.png);
}
#main_image.main_image_contact {
background-image: url(images/SRPM-Contact-Page-Background.png);
}
#main_image.main_image_services {
background-image: url(images/SRPM-Services-Page-Background.png);
}
    #main_image.main_image_news {
background-image: url(images/SRPM-News-Page-Background.png);
}
    #main_image.main_image_suppliers {
background-image: url(images/SRPM-Suppliers-Page-Background.png);
}

Where do I go wrong? It does not do what it’s supposed to do 🙁