Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Large background images

What are the problems with large background images? Well, lot's of them. It needs to be resized to show largest area possible on different resolutions, fill webpage background from edge-to-edge and keep it's proportions. You can't use background-image attribute because it's no possible to resize it (not in CSS2), and there should be no scrollbars, if part of background is outside browser window.

So how should it be done. IMG tag will be used for image, wich will be included in table cell for better positioning and it all will be positioned absolutely.

Here is an example CSS code:

html, body, #background, #background table, #background td, #content {
    height:100%;
    width:100%;
    overflow:hidden;
    padding:0;
    margin:0;
}

#background div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#background td {
    text-align:center;
    vertical-align:middle;
}

#background img {
    margin:0 auto;
    min-height:50%;
    min-width:50%;
}

#content {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
}

And here is HTML code:

<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
</head>
<body>
<div id='cont'>
</div>
<div id='bg'>
    <div>
        <table>
            <tr>
                <td>
                    <img src='../2011.jpg'/>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Limitations:

Code uses min-height, min-width css attributes, so in browsers who doesn't support them (like IE) it won't work. (You can modify it to use width and height, but it can lead to streching image).

You can shrink background to pretty small picture and as min-height and min-width attrbutes are already in use, there is no way to set minimum dimensions for bakckground.


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus