Fixed Background Works in Chrome but Not Firefox?

问题

Am I missing something?

body {
   margin: 0 auto;
   padding: 0;
   font-family: helvetica, sans-serif, Arial;
   color: #333333;
   font-size: 13px;
   background: white url(images/bg.jpg) no-repeat fixed top center;
}

回答1:

in SearchAndShare.css there is a body {background-attachment: inherit;} rule which, because this sheet is being called later than your main sheet, is overruling the "fixed" from your main sheet

removing that rule fixes Firefox, not sure if inherit is a valid call for a background-attachment but even if it is it would mean you would need to be setting background-attachment: fixed" on thehtmlelement so thebody` has something to inherit from

Update: Yes, if you don't want to mess with the plugin SearchAndShare.css file, adding html {background-attachment: fixed} to your main sheet also fixes it

回答2:

When using the shorthand background property, the order of the properties should be

color
image
repeat
attachment
position

Try changing the style as follows (change the repeat order and add the attachment and see if it makes a difference:

background: white url(images/bg.jpg) no-repeat fixed center 0;

Then remove the background-attachment:fixed;

EDIT: Apparently mixing keywords and values will cause some browsers to choke. So centre 0 might be the issue in FF.

Try 50% 50% or center center

回答3:

Try using this

background: url(under.gif) no-repeat fixed 10% 20%;

width: 780px;
font-family: Arial;
font-size: 0.8em;
background: url(images/bg.jpg) top left repeat-y;
border: 1px solid #e6930f

Hope this helpz...:)

来源：https://stackoverflow.com/questions/6123304/fixed-background-works-in-chrome-but-not-firefox

标签

css

background

fixed