How to resize a html page to perfectly fit a background image size?

**meteor** · Jan 25, 2007, 10:57

I need create offline html page, graphic menu for autorun.
How to resize a html page to perfectly fit a background image size? I need html page that need be resized to perfectly fit a background image size, also, this page need be centered on screen.

**funkdaddy** · Jan 25, 2007, 11:01

You can't detect the size of a image set to the background of an element, it needs to be in an <img> tag to get the .offsetWidth and .offsetHeight properties.

**meteor** · Jan 25, 2007, 13:11

Originally Posted by funkdaddy

You can't detect the size of a image set to the background of an element, it needs to be in an <img> tag to get the .offsetWidth and .offsetHeight properties.

OK, then we need use another method - insert image as usually, with image tags. Anybody know exact sample of code that will resize a page to perfectly fit an image size, and center page on the screen? That is similar that use popups.

**raimund** · Jan 25, 2007, 13:54

This is as close as you can get. It doesn't take into account the stuff like menus and buttons youu normally have in the browser, but you cant get that with IE. In Mozilla you can try to calculate the offsets using window.outerWidth & window.outerWidth

Code:

function resizeToImgDimensions(imgId)
{
    var img = document.getElementById(imgId);
    var imgW = img.offsetWidth;
    var imgH = img.offsetHeight;
    
    window.resizeTo(imgW, imgH);
    
    var x =  (self.screen.availWidth - imgW) / 2;
    var y =  (self.screen.availHeight - imgH) / 2;    

    window.moveTo(x,y);
}
window.onload = function() {resizeToImgDimensions("test")}

**meteor** · Jan 25, 2007, 16:05

This will also center page on the screen? I am wondering if I can see the full html code of that page.

**raimund** · Jan 25, 2007, 20:11

HTML Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Xinha Example Output</title>
<script type="text/javascript">
function resizeToImgDimensions(imgId)
{
    img = document.getElementById(imgId);
    var imgW = img.offsetWidth;
    var imgH = img.offsetHeight;
    
    window.resizeTo(imgW, imgH);
    
//get the coordinates for centering
    var x =  (self.screen.availWidth - imgW) / 2; 
    var y =  (self.screen.availHeight - imgH) / 2;    
//center it
    window.moveTo(x,y);
}
window.onload = function() {resizeToImgDimensions("test")}
</script>
</head>

<body>
<img src="/image.png" id="test" alt="justforcompleteness"/>
</body>

</html>

**meteor** · Jan 26, 2007, 04:28

thank you. I tried, there is some problems. One thing: this is offline page, image is on hard drive, not dynamically loaded from web, image width/height is known, however. When I open popup, i got full page screen and my image is at the top left corner, since IE block javascript by default, and requires action click on to allow. Also, I need popup with no menu bar, no scroll bar, no address bar, only dialog title bar.

meteor

The SitePoint Forums have moved.

User Tag List

Thread: How to resize a html page to perfectly fit a background image size?

Thread Tools

Display

How to resize a html page to perfectly fit a background image size?

Bookmarks

Bookmarks

Posting Permissions