It is necessary to fix the image in a certain place on the page

Question

I need to capture the .gif image in a specific place on my home page. I put the image in my HTML, and "position: fixed" does not do what I want - the rest of the page content scrolls below the image. I want the image to always stay in one place.

Disclaimer: I know almost nothing about HTML and CSS, so I apologize if this is a very simple question. I did some research, but none of what I tried seems to work.

In the corresponding note, my image changes size depending on which browser I am viewing my site. I am reading here to answer another question that you can fix by using percentages instead of pixels to format your object, but I tried this and the problem remains.

Other notes: I use Chrome as my browser and build my website using Weebly. My website address is http://www.designartistree.com/ and the image in question is a ribbon in the middle of the page under the large "Design Artistree" logo.

Greetings, newbie! Thanks!

Here is the html code that I have for the image:

<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show"> 

Answer 1

If you use position:fixed , the element is positioned relative to the window, so even if you scroll, the element does not move.

If you want it to move when scrolling, use position:absolute .

But because of your layout, you have 2 options:

• Put the image inside #box
• Remove the following code:

 html{ overflow:hidden; height: 100%; max-height: 100%; } body { height: 100%; max-height: 100%; width: 100%; } #box { height: 100%; max-height: 100%; overflow: auto; width: 100%; }