fix image position when resizing window

Question

I have an image with a position fixed in a page. When I re-size the browser the image get over my page content how can i prevent that to happen ?

<div >
  <img id="img1" class="wrapperImage"></img>
</div>

 <style type="text/css">
   .wrapperImage
   {
   position : fixed;
   width:200px;
   height:100px
   }
  </style>

Answer 1

   .wrapperImage {
       position : fixed;
       width: 100%;
       max-width:200px;
       height:auto
   }

Sizes in percentage improves your responsive design .

JSFIDDLE

Answer 2

try adding z-index:-1; to your css.

Answer 3

您必须设置一个中央div并将其设置为position:relative并为您设置图像position:absolute在中央div中使用z-index可以更改要显示的元素优先级，然后设置z-index:10为您的图像。

Answer 4

You can do this, the image would remain in the same position even when you resize the window,

By giving the parent tag relative positioning, and the child tad absolute, the position won't change even when the window is resized

<div id="divname">
  <img id="img1" class="wrapperImage"></img>
</div>

 <style type="text/css">
   .divname{
      position:relative; 
   }

   .wrapperImage
   {
     position : absolute;
     z-index:-1;  //depending weather your image should appear 
                       at the above or below div change it to +1 or -1
     top: 100px;
     right: 100px; 
     width:200px;
     height:100px
   }
  </style>