Hi - this is beginning to drive me mad...

 

I'm using a large 1800px x 1200px background centered in the frame yet the browsers just keep refusing to display the whole image. Its driving me crazy, i've tried everyting I can think of and more and I just dont know whas going on.

You can see whats happening at http://komskis.com/. The full background image is not being displayed and is instead replaced with the bg color at the bottom, side and strangely slightly at the top.

 

the jist of the css is:

html {

overflow: auto;

}

body {

position: absolute;

width: 100%;

height: 100%;

background: #333;

}

#gradient {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: transparent url("images/background.jpg") center center no-repeat;

}

#wrapper {

width: 800px;

margin: 50px auto;

}

 

I could really do with some help and if someone can help me figure out what is going on here I will love this forum for ever and swear on my dear old grandmas grave (god bless her soul) that I will come back more often and spend more time trying to help others out.

try something like this instead

 

body {
width: 100%;
height: 100%;
background: url("images/background.jpg") #333 center center no-repeat;
}

 

EDIT:

 

better yet, use this entire code

 

html {
overflow: auto; /* removes vertical scrollbar */
}
body {

width: 100%;
background: #333 url("images/background.jpg")  no-repeat center -200px;

}
#wrapper {
width: 800px;

margin:  50px auto;


}

Cheers mate! I think I was going about it all backwards. I also have working with:

 

/* CSS text */
html {
  min-height: 102%;
  overflow: auto;
}
body {
  width: 100%;
  height: 100%;
  background: #222 url("/images/background.jpg") center center no-repeat;
}
#wrapper {
  width: 800px;
  margin: 75px auto;
}

 

The only (fairly big) problem is it only works in Firefox. In IE and Safarai the contents slid out of position if you adjust the size of window frame. Would you know why this is?