title: Need to fix an image to a specific spot on a page
body: <p>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.</p>
  
  <p>Disclaimer: I know next to nothing about HTML &amp; CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.</p>
  
  <p>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.</p>
  
  <p>Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is <a href="http://www.designartistree.com/" rel="nofollow">http://www.designartistree.com/</a> and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.</p>
  
  <p>Any beginner-friendly advice would be greatly appreciated! Thank you!</p>
  
  <p>Here's the html code that I have for the image:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>