/    Sign up×
Community /Pin to ProfileBookmark

Problem with div background inmage in Firefox

Copy linkTweet thisAlerts:
Sep 25.2006

Hi

I have a div with a background image, that I am having trounble positioning in Firefox. Example here: [url]http://www.minervajewels.co.uk/info.aspx[/url]. The image height is the same as the div height, but the image seems to start at a higher position than the div so the top is chopped off and the image starts to repeat even though i have specified no-repeat. This is my CSS:

div#content {width:625px; padding-top:3px; padding-bottom:3px; padding-top:3px; background:url(images/background.gif) fixed no-repeat center top; height:450px; overflow:auto;}

If anyone could tell me how to fix the image position (which is fine in IE) i would be most greatful!!

Many thanks in advance!

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 25.2006 — div#content {width:625px; padding-top:3px; padding-bottom:3px; padding-top:3px; background:url(background.gif) no-repeat;background-attachment:scroll !important;background-attachment: fixed; height:450px; overflow:auto;}
FF, Opera and IE7 attach the image to the viewport if fixed is applied. IE6 applies it to the element.
Copy linkTweet thisAlerts:
@mark_yiehSep 26.2006 — well, it could be because you mixed up the order of the arguments in your "background" style rule. The order of the arguments should be:

background: url(images/background.gif) no-repeat fixed center top;

also if the background image is the same size as the div itself, then why are you adding paddings to the div.

IE renders padding differently than firefox and other standards compliant browsers. Here's a good resource on the box model. This will explain why IE seems to render correctly while firefox isn't.

http://www.w3.org/TR/REC-CSS2/box.html

basically, IE interprets the width of an element to include the padding, while the specification is actually supposed to not include the padding. So for example if you set a div to have a width of 100px and then set the padding to be 10px on all sides, then IE will render the total box to be 100px wide, while non-buggy browsers such as firefox and safari will render the total box to be 120px wide.
×

Success!

Help @purplerhian 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.13,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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