I've only worked this out in my head, but it should help you on the right path for a solution...
Rather than putting the picture there using the background CSS property, put it at the top of your document on it's own...
Code:
<img id="bgImage" src="myimage.jpg" alt="background" />
CSS:
Code:
#bgImage {
position: absolute;
top: 10%;
left: 10%;
width: 90%;
height: 90%;
}
Ideally, that would make it do what you want until the user resizes their browser. You'll need some JavaScript to handle this.
Code:
var pageWidth;
var pageHeight;
var bgImage;
window.onload = initPage;
window.onresize = resizeBgImage;
function initPage() {
bgImage = document.getElementById( 'bgImage' );
resizeBgImage(); // maybe this is redundant with the CSS
} // End initPage function
function resizeBgImage() {
/* This section mostly plagiarized (1) */
var w,h;
if (self.innerHeight) // all except Explorer
{
w = self.innerWidth;
h = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
w = document.body.clientWidth;
h = document.body.clientHeight;
}
/* End of plagiarism */
// This is probably not cross-browser
bgImage.style.width = w * .9;
bgImage.style.height = h * .9;
bgImage.style.top = h * .1;
bgImage.style.left = w * .1;
} // End resizeBgImage function
That should give the general idea; When the page is resized, resize the image and set the top and left position. I have probably made some errors, but I'm sure someone
![[smarty]](/data/assets/smilies/smarty.gif "[smarty] [smarty]")
will post corrections very quickly.
You will want to put your content in another absolutely positioned div. Maybe give these objects z-index values, to make sure they stack properly.
Doing it this way will distort your image. You'll have to do some math to make sure it maintains the same aspect ratio. I'll leave that to you to figure out. The principle will remain the same.
Reference:
[ul]
[li]
quirksmode.org: an excellent site with tons of useful information[/li]
[li](1)
Viewport Properties: The source of my plagiarism[/li]
[li]
CSS 2.1 Specification: Memorize this... then forget it if you want your pages to work in other browsers[/li]
[/ul]
--
-- Ghodmode
Give a man a fish and he'll come back to buy more... Teach a man to fish and you're out of business.
