0

I am working on a page on my site that contains quite a bit of data, so the page is really long. The page consist of a background image for the main body and a container with a background image, both of which run the full length of the page (not top or bottom margins, and no top or bottom padding). I am running into a problem with the background images: they are not extending to the bottom of the page at certain resolutions. The screen that I code on is 1680px wide and at present both background images extend all the way to the bottom. However, when I view the page on a screen with a smaller resolution (such as one that is 1280px wide) the background images do not extend all the way to the bottom.

I am using XHTML 1.0 Strict.

Here is the relevant HTML code:

<body class="ice01">
<div id="maincontent2">
<!-- content -->
</div>
</body>

Here is the relevant CSS code: 

.ice01 {
background-image: url('../images/iceBackground04.jpg') ;
    margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;}


#maincontent {
width: 88%;
background-image: url(../Images/BlueParchment.jpg);
margin: 0px auto;
padding: 0px 32px 0px 32px;}

This problem also presents itself if I resize my window. Also, if I take out the background-images and replace them with a color this problem goes away. I have tried using back shorthand (background: #0000ff url('../images/iceBackground04.jpg') repeat 0 0;), and that does not fix the problem.

I have tried using min-height: 100%; on both of them and it does not fix the problem. I have also validated the web page via W3C and it all checks out so I do not think that it is caused by any missing/unclosed tags.

Here is the url for the page in question: http://icengale.com/icenDeities-Mainen.html

I am using a "reset" css file, but removing that does not fix the problem, so I do not think that that is causing the problems.

Any and all help is greatly appreciated, thanks!

andreas
  • 16,357
  • 12
  • 72
  • 76
Mock26
  • 71
  • 1
  • 3
  • 9

1 Answers1

0

Try with the following css if it works.

.ice01 {
background:url(../images/iceBackground04.jpg) repeat-x 0 0;
margin: 0 100px; 
font-family: book antiqua; 
font-size: 19px; 
color: #12124c;}


#maincontent {
width: 88%;
background:url(../images/BlueParchment.jpg) repeat-x 0 0;
margin: 0px auto;
padding: 0px 32px 0px 32px;}
Swarnamayee Mallia
  • 2,004
  • 14
  • 11
  • That did not work, Swarnamayee Mallia. It did inspire me to do a little testing, and the background image is stopping at about 32,750px (I added a border to the background image and counted out the number of times it repeats). And it only stops short in Firefox. It displays normally in IE8. I have not tested in anything else. – Mock26 Jul 03 '13 at 05:54