True centering of a image and allow for full screen scaling 1

ShawnMolloy · Aug 20, 2006

Hello,

I have a large 1600x1200 image that I want to use as the background for a page. I would like the image to appear in the exact center of the page (horizontal and veriticle) and when the user expands the page to full view , or a browswer with a higher resolutions attempts to view it, it will continue the display the remaining dimensions of the image.

Thanks,

-- shawn

Shawn Molloy
Seattle, WA

Ghodmode · Aug 20, 2006

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]

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.

ShawnMolloy · Aug 20, 2006

Thank you! This is an excellent post. I get the general jist of it; I am going to try to impliment this and let you know how it goes.

Thanks a lot!

-- shawn

Shawn Molloy
Seattle, WA

Vragabond · Aug 20, 2006

I personally would go for something like this (by reading your post this is what I understand from it):

Code:

<body style="background: url(myBigImage.jpg) center center no-repeat;">

Of course, I would move the style to the separate css stylesheet eventually.

Ghodmode · Aug 20, 2006

Vragabond:
Using that method, won't the image potentially be bigger than the page? So, it would just show the center of the image with the edges cut off and no margin?

--
-- 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.

Vragabond · Aug 21, 2006

Ghodmode, exactly. Reading the OP's request I got:

1. "want to use as the background for a page" -- yup, my solution is a background;
2. "exact center of the page" -- my solution should provide that.
3. "browswer with a higher resolutions attempts to view it, it will continue the display the remaining dimensions of the image" -- exactly what a background image does.

So, I can't think why I shouldn't do that. The fact that the entire image should be shown at all times is against OP's wishes and some kind of margin never ever existed in OP's request. So, why not?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

True centering of a image and allow for full screen scaling 1

ShawnMolloy

MIS

Ghodmode

Programmer

ShawnMolloy

MIS

Vragabond

Programmer

Ghodmode

Programmer

Vragabond

Programmer

Similar threads

Part and Inventory Search

Sponsor