/    Sign up×
Community /Pin to ProfileBookmark

Fill Window / Centered Background Opera

I’m using the following code to fill a page with a centered background image.

My html:

[CODE]<div id=”bg”>
<img src=”images/bg.jpg” alt=””>
</div>[/CODE]

My Css:

[CODE]#bg {
position:fixed;
top:-50&#37;;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}[/CODE]

This works as I’d like in current browsers other than Opera.

Opera doesn’t position the image at center.

Can someone provide me with a fix?

My site: [url]http://www.robindean.com/[/url] – try it in FF then Opera to see the difference in bg position.

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@Big_O_1_Dec 07.2010 — why not use a CSS background-image property instead? Much easier to work with than an image tag in a div
Copy linkTweet thisAlerts:
@robindeanauthorDec 07.2010 — I tried that but, unfortunately, an ugly white line appears to the left and right of the background depending on window dimensions. So ... no go on that.

My current system is working smooth as butter with the exception of Opera.
Copy linkTweet thisAlerts:
@robindeanauthorDec 08.2010 — Alright,

So ... I'm using your suggested CSS for opera and opera only.

Yet ... still that white line to the right and left appears depending on window scaling.

Open it it Opera (mac) and have a look. I think it likely does the same on pc.

How do I get rid of the extra pixel of white space?
Copy linkTweet thisAlerts:
@noahqwDec 08.2010 — Just sue the below HTML code to align it to the center:
[code=html]<img src="file:///C|/Users/Owner/Desktop/4-Eyes.gif" alt="image" width="64" height="64" align="center" /> [/code]
Copy linkTweet thisAlerts:
@robindeanauthorDec 09.2010 — Um, no.

So ... the single pixel of white space on either side ... solutions?
×

Success!

Help @robindean 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...