div ID og background image, defineret i css

Jeg har et site med flere undersider som alle har et banner billede.
Banner billedet på de forskellige undersider er forskellige - så løsningen har indtil videre været:

forside:
<div id="banner"><img src="forside.jpg"></div>

kontakt:
<div id="banner"><img src="kontakt.jpg"></div>

osv.

i css er #banner defineret med height, width osv.

Mit spørgsmål er, om det ikke er muligt at tilføje bannerbilledet i css, frem for at tilføje <img src=""> på hver side. Jeg er klar over at jeg kunne lave en løsning med:

forside:
<div id="banner_forside"></div>

kontakt:
<div id="banner_kontakt"></div>

og så angive width, height samt baggrundsbillede for hver ID - men løsningen jeg leder efter at kun definere width, height én gang, og så definere backgroundimage for sig selv i css.

Jeg troede jeg kunne lave noget i den her stil:
<div id="banner" class="forside_banner"></div>

#banner {
height:300px;
width:600px;
}
.forside_banner {background:url(banner_forside.jpg) no-repeat left top;}

men det virkede ikke.. Men er der en lignende løsning?