100% height image with margins

**Codecaster** · 12-13-2010 06:17 PM

Hello,

I ran into a problem trying to create an image that should take up the center of the viewport (dynamic height). I tried to implement this using an image with 100% height and a container with some padding (to exclude a header and footer with a fixed height). An approach like this usually works fine on horizontal liquid layouts, but I can't get it to work vertically. Does anyone know of a way to achieve this with just css?

Thanks in advance!

**3dman** · 12-14-2010 12:07 AM

can you please share the code. then this is very helpful for us.

**Codecaster** · 12-14-2010 05:11 AM

Well, for example:

html:

HTML Code:

<html>
  <body>
    <div id="header"></div>
    <div id="imagecontainer">
      <img src="images/myImage.png"></img>
    </div>
    <div id="footer"></div>
  </body>
</html>

css:

Code:

html, body {
  height: 100&#37;;
}

#imagecontainer {
  height: 100%;
  text-align: center;
}

img {
  height: 100%;
  width: auto;
}

#header {
  position: absolute;
  top: 0px;
  width: 100%
  height: 20px;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20px;
}

This will stretch the image across the entire height, which is not what I want. I would really like it to leave some space on the top and bottom for my header and footer (while still stretching to fit the available space in the center). Any ideas?

Thread: 100% height image with margins

Thread Tools

Display

100% height image with margins

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions