Image placement always on the central page

Question

placing the image is always on the central page (loading the Ex image to call ajax), even when moving the scroll. like this?

Answer 1

For most browsers you can use position:fixed

 img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

If the image was, for example, 40x30 pixels, you would set margin-left:-20px; margin-top:-15px.

Here is a jsfiddle example: http://jsfiddle.net/WnSnj/1/

Please note that the position: fixed does not work exactly the same in all browsers (although this is normal in all modern browsers). See: http://www.quirksmode.org/css/position.html

Answer 2

<style>
.CenterScreen{
   position:fixed;
   /*element can move on the screen (only screen, not page)*/

   left:50%;top:50%;
   /*set the top left corner of the element on the center of the screen*/

   transform:translate(-50%,-50%);}
   /*reposition element center with screen center*/

  z-index:10000;
  /*actually, this number is the count of the elements of page  plus 1 :)*/
  /*if you need that holds the element top of the others. */
</style>

, .

:

<a href="#" class="CenterScreen">Hello world</a>

Answer 3

This may help you: http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

Answer 4

Put the image in a div tag with some class name (centeredImage) and use the following css

div.centeredImage {

  margin: 0px auto;
  position: fixed;
  top: 100px;//whatever you want to set top;

}