CODEWITHSUNDEEP
cssbackgroundfixed
Tara
Tara

Reputation: 1598

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;
}

Upvotes: 2

Views: 7314

Answers (3)

clairesuzy
clairesuzy

Reputation: 27664

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

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34863

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

  1. color
  2. image
  3. repeat
  4. attachment
  5. 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

Upvotes: 1

harishtps
harishtps

Reputation: 1439

Try using this

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

or 

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...:)

Upvotes: 0

Related Questions