Hi! There's two ways in which you can do this:

<div style="display: grid; margin: 8px; max-width: 650px; height: 750px; margin: 0 auto; overflow: hidden;">
<div style="grid-area: 1 / 1; overflow: hidden; user-select: none;">[[File:Placeholder.png|800px]]</div>
<div style="grid-area: 1 / 1; overflow: auto;">

text here

</div>
</div>
</div>

You might need to change the sizes (which are in the max-width:650px;, height:750px; and 800px in the image- only change the number. don't remove the px or it won't work). If you want to add fonts or anything special, add it to the top part. For example, you'd put:

<div style="display: grid; margin: 8px; border-radius: 13; max-width: 650px; height: 750px; margin: 0 auto; overflow: hidden; font-family: Im Fell English; color: #fff; text-align: center">

At the top for a different font. The color: #fff is the color of the text, and the text-align moves text to the center. I work better with grid-area, but most people work with

<div style="font-family: 'IM fell english', serif; color:#fff; text-shadow: #E4BF8D 0px 0px 5px; text-align: center; padding:10px;">
<div style="position: relative; margin:0 auto; width: 600px; height: 800px; overflow: hidden;">
<div>[[File:Placeholder.png|600px|center|alt=Background Image|link=]]</div>
<div style="position: absolute; top: 0; width: 100%; height: 100%; overflow: auto;">

text here

</div>
</div>
</div>

The thing with image backgrounds is that you have to make them scroll if they get too long, otherwise a too big image will be too zoomed in and too big. you can also copy the code off my Message wall, which has the grid area code.

Thank you so much! Can i have the code for the scroller?