I found that even twitter doesn’t use this fix and their background imposition on low resolution. see Twitter custom background on low resolution.

CSS ie used by twitter

body {
  background: #005687 url('http://a1.twimg.com/profile_background_images/79291092/twitter-theme-2.jpg') fixed no-repeat;

}

I tried auto margin and center attribute of background property, separately and together. But it hadn’t got it fixed. I also played with width and height properties. But nothing worked for me.

  container{height:100%;text-align:center;background: url(images/header.jpg) no-repeat center; height:634px; margin:0 auto;}

Now I set top attribute as follows and it got fixed.

container{background: url(images/header.jpg) no-repeat top ;}

If you are facing more display errors then refer CSS compatibility charts to know what properties or attributes you should avoid to use.

I hope this tip would be useful to big background sites.

Amit Gupta

Hey! this is Amit Gupta (amty). By profession, I am a Software Eng. And teaching is my passion. Sometimes I am a teacher, as you can see many technical tutorials on my site, sometimes I am a poet, And sometime just a friend of friends...