/    Sign up×
Community /Pin to ProfileBookmark

CSS Background Image positioning

Copy linkTweet thisAlerts:
Feb 18.2012

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.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscFeb 18.2012 — background-position: center;

What's background.opacity?
Copy linkTweet thisAlerts:
@nsathauthorFeb 18.2012 — 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
Copy linkTweet thisAlerts:
@aj_nscFeb 18.2012 — 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:

<i>
</i>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.
Copy linkTweet thisAlerts:
@nsathauthorFeb 18.2012 — 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
Copy linkTweet thisAlerts:
@aj_nscFeb 18.2012 — 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.

<i>
</i>&lt;div id="allservices"&gt;
&lt;div class="bg"&gt;&lt;div&gt;
&lt;div class="content"&gt;
Content of all services
&lt;/div&gt;
&lt;/div&gt;


<i>
</i>#allservices { margin-top:3px; margin-left:10px; height:920px; width:865px; [b]position: relative;[/b]}
#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.
×

Success!

Help @nsath spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...