CSS Background Image positioning

[nsath]

I have created the a div (allservices) with the dimensions below, and require a background image. The background image is of dimensions 865 * 915px. The width of the background sits perfectly into the div, however, the height of the background image is 5px shorter than the height of the div, hence I wish to position it 2.5px down from the top of the div and 2.5px up from the bottom of the div.

Style Follows:

#allservices{margin-top:3px; margin-left:10px; height:920px; width:865px;
background-image:url(someimage.jpg);

/* the dimensions of someimage.jpg is as follows:

height = 915px, width = 865px */

background.opacity:0.25;
background.filter:alpha(opacity=25);
background-position:;
background-repeat:no-repeat;
}

any ideas, solutions, and suggestions much appreciated along with any point outs of errors.

[aj_nsc]

background-position: center;

What's background.opacity?

[nsath]

background-position: center; is for horizontal isn't it? i mean vertically centered but it seems to be fine!

The background image consists of dark colors and you cannot see any of the text so background.opacity was just something i just tried referring to

http://www.w3schools.com/css/css_image_transparency.asp

[aj_nsc]

With regards to background.opacity, it doesn't work like that, there's no such thing.

As for vertically and horizontally centering a background image, the actual rule is this:

background-position: center center;
/* background-position: horizontal-position vertical-position */

If you only have one property for the background-position rule, then it uses that value for both the horizontal and vertical positions.

[nsath]

Cheers! much appreciation for that any ideas as for the opacity of the background image or would you recommend using something like photoshop because something that has come across my mind but i thought let me try some other ways

[aj_nsc]

I don't recommend photoshop because you'd have to save it as a PNG, and if it's reasonably detailed at all, a PNG that size would be massive (several hundred kb).

What I would recommend, is using the opacity property, but just a little differently.

<div id="allservices">
  <div class="bg"><div>
  <div class="content">
    Content of all services
  </div>
</div>

#allservices { margin-top:3px; margin-left:10px; height:920px; width:865px; position: relative;}
#allservices .bg { position: absolute; top:0; left:0; right:0; bottom:0; opacity: 0.25; z-index: 1; background: url(someimage.jpg) center center no-repeat; }
#allservices .content { position: relative; z-index: 2; }

This is a common cross-browser technique to use a semi-transparent background image without affecting the transparency of the content.