• DEMO1 (basic)
• DEMO2 (customize : center position setting)
• DEMO3 (customize : image offset)

jquery.imgbg DEMO2 (customize : center position setting)

This is a demo sample of customizing image base position.

If you want to change a base position of image when visitors change a browser size, you have to set parameter (left & top) in number of percent.
[upper left / lower right / left:30%, top:80% / etc..]
Images will be resized on basis of the posision which you set when user chenge a browser size.

This page is example of setting basis on lower right corner.

How to use

HTML (LOAD plugin)

HTML (image)

Setting example

$(function(){

  // No1: center of images. (default setting)
  $("#demo").imgbg({
    centerX : 50,
    centerY : 50
  });

  // No2: upper left corner of images
  $("#demo").imgbg({
    centerX : 0,    // position from from left (without string '%')
    centerY : 0     // position from top (without string '%')
  });

  // No3: lower right corner of images
  $("#demo").imgbg({
    centerX : 100,    // position from from left (without string '%')
    centerY : 100     // position from from top (without string '%')
  });

});