• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

High resolution image background resizer

Background resizer class can be used to display high resolution images as background for websites. Class will resize background image for different screen resolutions supporting this criterias:

  • fill window from edge to edge
  • display largest area possible
  • keep image proportions (without streching image)
  • hide scrollbars caused by background image
  • support most popular browsers (including IE)

Additional configuration can be provided like min/max width/height for background to be resized. Supported only by browser which support min/max-width/height CSS attributes

Note: This package changes DOM structure - includes any content in a wrapper div, which is positioned absolutely on top of background layer

Package contains bg_resizer.js and bg_resizer.packed.js (packed javascript), two large background examples: large_bg.png(example to sow how image is resized to display largest area possible while covering screen from edge to edge) and 2011.jpg (simple large background), and example files for each background: resize_example.html (with large_bg.png defined minwidth, minheight, maxwidth, maxheight)



Example codes

<body style="text-align: center;">
<div style="width:1000px; margin: 0 auto 0 auto; height:500px; border: 3px solid black;">
<p>somecontent here</p>
<div> and here </div>
<script type="text/javascript" src="./bg_resizer.packed.js" ></script>
<script type="text/javascript">
//create rating instance
//parameter json with configuration values
bg_resizer("./large_bg.png", {minwidth: 600, minheight: 300, maxwidth: 1920, maxheight: 1280});

Examples in action

Example scripts provided with package in action:

Method list


Back to method list

Method namebg_resizer(image_path, config);
DescriptionCreates resizable background image with needed HTML mark up
Input parameters

string image_path - path to image

json config - additional configuration

  • int minwidth - minimal width to resize background (supported by browser with min-width CSS attribute support, excludes IE)
  • int minheight - minimal height to resize background (supported by browser with min-height CSS attribute support, excludes IE)
  • int maxwidth - maximal width to resize background (supported by browser with max-width CSS attribute support, excludes IE)
  • int maxheight - maximal height to resize background (supported by browser with max-height CSS attribute support, excludes IE)

Example inputbg_resizer("./image.jpg",{minwidth : 800, minheight : 600, maxwidth: 1920, maxheight: 1280});

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Try it out and Rate on


JS classes support forum or comments below

You may also be interested in:

Powered by

blog comments powered by Disqus