lystar
04-15-2009, 11:15 AM
Hi all,
I've ran into an issue using background-position. Unfortunately I can not provide a URL. Site is not ready for launch and the people I am developing it for do not want any stray links floating around the web yet. For the same reason I'm pretty limited to the amount of code I can reveal.
The site is to have a solid background color with a radial fading gradient to the lower right corner. To achieve the effect I've simply made an image of sufficient size and positioned it to the bottom right corner using the following:
body {
background-color:#<insertcolorcode>;
background-image:url('<insert graphic path and name>');
background-position:right bottom;
background-repeat:no-repeat;
margin:0;
padding:0;
}
This code works and displays what I want unless the page content is shorter than the browser window.
The body of the html has the following format:
<body>
<div id="headerwrap">
<div id="header">HEADER IMAGES ETC. GO HERE</div>
<!-- Some other div's with site features are also in the header -->
</div>
<div id="contentwrap">
<div id="left">
<div class="sidebox">Menus, links, ads etc go in different sideboxs within the left panel of my content section. There can be several of these.
</div>
</div>
<div id="contentwindow">
This Div is where the actual content window goes, it is divided up into several other div elements.
</div>
</div>
<div id="footer">
Footer div's etc go here
</div>
</body>
The only element above which has any special positioning code other than margins and padding is the "left" id which has float: left; applied to it.
The problem is when the content is short enough that there is whitespace between the end of footer division and the end of the browser window, the background image doesn't sit at the bottom right of the whitespace, but rather it sits in the bottom right at the same level as the last element in the body. In this case it would sit at the the bottom right of the footer element. Displaying a chunk of solid background color in the whitespace where the background should be.
If I add a <br/> element after the footer, the background image will move down and sit at the bottom right at the same level of the <br/> element. If there is blank space between that <br/> and the end of the browser window, it again displays the solid background color
I've only noticed the issue in FireFox 3. Internet Explorer 7 is displaying the expected result. I currently do not have access to IE8, so I'm unable to check the site in Explorer 7's more compliant counterpart.
Anybody willing to venture a guess as to whats causing this? Its been driving me crazy for a full day now...
I've ran into an issue using background-position. Unfortunately I can not provide a URL. Site is not ready for launch and the people I am developing it for do not want any stray links floating around the web yet. For the same reason I'm pretty limited to the amount of code I can reveal.
The site is to have a solid background color with a radial fading gradient to the lower right corner. To achieve the effect I've simply made an image of sufficient size and positioned it to the bottom right corner using the following:
body {
background-color:#<insertcolorcode>;
background-image:url('<insert graphic path and name>');
background-position:right bottom;
background-repeat:no-repeat;
margin:0;
padding:0;
}
This code works and displays what I want unless the page content is shorter than the browser window.
The body of the html has the following format:
<body>
<div id="headerwrap">
<div id="header">HEADER IMAGES ETC. GO HERE</div>
<!-- Some other div's with site features are also in the header -->
</div>
<div id="contentwrap">
<div id="left">
<div class="sidebox">Menus, links, ads etc go in different sideboxs within the left panel of my content section. There can be several of these.
</div>
</div>
<div id="contentwindow">
This Div is where the actual content window goes, it is divided up into several other div elements.
</div>
</div>
<div id="footer">
Footer div's etc go here
</div>
</body>
The only element above which has any special positioning code other than margins and padding is the "left" id which has float: left; applied to it.
The problem is when the content is short enough that there is whitespace between the end of footer division and the end of the browser window, the background image doesn't sit at the bottom right of the whitespace, but rather it sits in the bottom right at the same level as the last element in the body. In this case it would sit at the the bottom right of the footer element. Displaying a chunk of solid background color in the whitespace where the background should be.
If I add a <br/> element after the footer, the background image will move down and sit at the bottom right at the same level of the <br/> element. If there is blank space between that <br/> and the end of the browser window, it again displays the solid background color
I've only noticed the issue in FireFox 3. Internet Explorer 7 is displaying the expected result. I currently do not have access to IE8, so I'm unable to check the site in Explorer 7's more compliant counterpart.
Anybody willing to venture a guess as to whats causing this? Its been driving me crazy for a full day now...