Background image not extending to bottom of page
Question
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!
1 answers
solution1
0 2013-07-03 04:56:27
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;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.