Need to fix an image to a specific spot on a page - html

Question

I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/ and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
Any beginner-friendly advice would be greatly appreciated! Thank you!
Here's 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 relatively to the window, so even if you scroll, the element doesn't move.
If you want it to move when you scroll, use position:absolute.
But because of your layout, you have 2 options:
Place 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%;
}