Same class ith different backgrounds?

[liamloveslearning]

Hi everyone

 

Im having a bit of trouble with my styles, I have 6 boxes on a webpage, all the boxes have the exact same dimensions etc the only thing which is different is the backgrounds, im trying to use a generic style on all boxes but then add an extra style to add the background if this makes sense?

 

 

HTML

<div class="servicesbox box2">
<div class="servtitle"><a href="production.html">Production</a></div>
<img src="images/serviceboxes/circularsaw.png" width="218" height="123" border="0" alt="Signworld Production" /></div>

<div class="servicesbox box1">
<div class="servtitle"><a href="manufacturing-and-technology.html">Manufacturing</a></div>
<img src="images/serviceboxes/circularsaw.png" width="218" height="123" border="0" alt="Signworld Manufacturing and Technology" /></div>

 

my styles

.servicesbox {
background-image:url(images/services-bg-repeatx.jpg);
background-repeat:repeat-x;
display:block;
float:left;
height:123px;
margin-bottom:20px;
font-size:14px;
margin-right:16px;
text-align:left;
width:218px;
border-color:#CFCFCF #CFCFCF red;
border-style:solid;
border-width:1px 1px 5px;
}

.box1 {
background:newimage.jpg; 
}

.box2 {
background:newimage.jpg; 
}

 

However it doesnt work, can anybody see why?

[trq]

.box1 {
  background-image:url(images/newimage.jpg);
}

[liamloveslearning]

Thanks Thorpe, for some reason it doesnt show my background images tho, Heres my latest code

 

HTML

<div class="servicesbox webdesign">
<a href="web-design.html">Web Design</a>
</div>

<div class="servicesbox manufacturing">
<a href="manufacturing-and-technology.html">Manufacturing</a></div>


<div class="servicesboxright install">
<a href="onsite-installation.html">On-Site Installation</a></div>

<div class="servicesbox projman">
<a href="project-management.html">Project Management</a></div>

<div class="servicesbox sitesurv">
<a href="site-surveys.html">Site Surveys</a></div>

<div class="servicesboxright maint">
<a href="maintenance.html">Maintainance</a></div>
</div>

 

CSS

.servicesbox a { 
display:block;
height:123px;
margin-bottom:20px;
font-size:14px;
margin-right:16px;
text-align:left;
width:215px;
border-color:#CFCFCF;
border-style:solid;
border-width:1px 1px 5px;
} 

.servicesbox a:hover { 
display:block;
height:119px;
margin-bottom:20px;
font-size:14px;
margin-right:16px;
text-align:left;
width:207px;
border-color:#CFCFCF;
border-style:solid;
border-width:5px 5px 5px;
} 






.webdesign { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
z-index:999;
} 

.manufacturing { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
  z-index:998;
} 

.install { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
  z-index:997;
} 

.sitesurv { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
  z-index:996;
} 

.projman { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
  z-index:995;
} 

.maint { 
float: left; 
background-image:url(background-image:images/serviceboxes/hardhat.png);
  z-index:994;
} 

[ignace]

background-image:url(background-image:images/serviceboxes/hardhat.png);

 

should be:

 

background-image:url(images/serviceboxes/hardhat.png);

 

Read a manual every now and then. See http://htmldog.com/reference/cssproperties/background-image/