Qualtrics image needs to be fixed on scroll. Help a noob with Javascript + HTML

I'm basically trying to get an image to stay static at the top of the page, while when the user scrolls down to answer the questions, the image stays there static. I've gotten it to work somewhat using this html code:

```
<div class = "image">
<img src="https://jmsbconcordia.ca1.qualtrics.com/CP/Graphic.php?IM=IM_2nqZMvzMFTZHO4Z" width="600px" height="600px"/>
</div>

<div class = "image_spacer">
</div>
<style>
.image{
background: white;
width:100%;
z-index: 1000;
text-align:center;
}
.image.fixed{
position: fixed;
top:0;
left:0;
}
.image_spacer{
height: 600px;
visibility: hidden;
display:none;
}
.image_spacer.fixed{
display:block;
}
</style>
```

and this javascript which is inserted in both the graphic/text section and the question section (only way I got it to work).

```
Qualtrics.SurveyEngine.addOnReady(function()
{
{ $$('.image').forEach(ele=>ele.addClassName('fixed'));

});
```

In reference to these two posts

https://stackoverflow.com/questions/46286498/how-to-have-entire-item-in-qualtrics-remain-in-position-when-scrolling

https://www.qualtrics.com/community/discussion/1622/keeping-an-image-frozen-in-place-when-scrolling-issue-with-spacer-element-in-javascript-amp-html

The image does stay at the top, and the question scrolls properly, the only issue is the image overlaps the questions so the first few questions are completely hidden behind the image. Is there a way to make a space to lower the questions so that the image doesn't overlap them upon starting the survey?

Here's what I mean
https://imgur.com/x3LbCwO

I think I need to create space at the graphic/text level but since I don't know HTML or Javascript, I don't know what code to put in. The graphic/text and question are part of the same block, but are separate (i.e., the graphic itself isn't part of the descriptive text for the question).
Thanks to anyone who can help!