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

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%;
}