Necesidad de arreglar una imagen en un lugar específico en una página

Necesito arreglar una imagen .gif en un lugar específico en mi página de inicio. Coloqué la imagen en mi HTML, y “posición: fija” no hace lo que quiero, el rest del contenido de la página se desplaza debajo de la imagen. Quiero que la imagen permanezca en el mismo lugar en todo momento.

Descargo de responsabilidad: No sé casi nada acerca de HTML y CSS, así que mis disculpas si esta es una pregunta muy simple. He investigado, pero nada de lo que he intentado parece funcionar.

En una nota relacionada, mi imagen cambia de tamaño según el navegador en el que esté viendo mi sitio. Leí aquí en respuesta a otra pregunta que puede remediar usando porcentajes en lugar de píxeles para formatear su objeto, pero lo intenté y El problema persiste.

Otras notas: uso Chrome como mi navegador y estoy construyendo mi sitio con Weebly. La dirección de mi sitio web es http://www.designartistree.com/ y la imagen en cuestión se encuentra en el centro de la página debajo del logotipo grande “Design Artistree”.

¡Cualquier consejo para principiantes sería muy apreciado! ¡Gracias!

Aquí está el código html que tengo para la imagen:

ribbon 

Si usa la position:fixed , el elemento se coloca en relación con la ventana, por lo que incluso si se desplaza, el elemento no se mueve.

Si desea que se mueva cuando se desplaza, use position:absolute .

Pero debido a su diseño, tiene 2 opciones:

  • Coloca la imagen dentro de #box
  • Eliminar el siguiente código:
 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%; }