Add background image in between another class for aesthetic purposes only

Question

So I have a specific code for a hover effect on buttons that lead to certain categories on a wiki I raised. You can see those buttons here. (You can click on 'edit' to see the HTML on that page.)

Here's the code I'm using for this

.helpmodule 
img:hover { 
-moz-opacity: .8; 
-khtml-opacity: .8; 

background-image: url(vignette3.wikia.nocookie.net/zombieescape/images/3/32/…); 
background-position: center; 
opacity: .8; 
width: 200px; 
height: 200px; 
} 

Basically, all the code works for everything I need except for one little thing: The background-image, which you can find here. This image needs to be put at the center of those 9 buttons. The problem is that the class I'm using, of course, puts all those functions to all images used.

I want to find a way to get that specific image at the center of the buttons, without it moving away the buttons etc... so like a background image (that potentially can get behind the buttons if necessary).

Answer 1

Ok, I managed to get the exact result I wanted. What you need to do is first create an ID that has the background image, in this case the code is:

#buttons-navigator-body { 
    background-image: url(insert your url here);
    background-repeat: no-repeat, no-repeat;
    background-position: center;
}

You now add a <div id="buttons-navigator-body"></div> and then, you can create your entire setup of elements within this ID. It will now automatically center the image in the middle of the bounding box of all elements together. All these are driven by one class that hovers images as you go over them with the following code:

.buttons-navigator-hover img:hover {
  -moz-opacity:     .8;
  -khtml-opacity:   .8;
  opacity:          .8;
  width:            200px;
  height:           200px;
}

The result can be seen here: http://zombieescape.wikia.com/wiki/Zombie_Escape_Wiki

Note that this might seem very logical or already answered in thousand posts, but in my case it was the purpose to have a background image that center itself exactly at the middle of a specific setup of elements to work along with multiple functional hover buttons, as opposed to just have a tiling image.