# How-to: wrap the text area in an image/border

**URL:** <https://forum.choiceofgames.com/t/how-to-wrap-the-text-area-in-an-image-border/179808>\
**Category:** Game Development\
**Created:** [October 31, 2026, 8:27pm UTC](https://forum.choiceofgames.com/t/how-to-wrap-the-text-area-in-an-image-border/179808 "2026-10-31T20:27:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stewart\_Baker](https://sea3.discourse-cdn.com/choiceofgames/user_avatar/forum.choiceofgames.com/stewart_baker/32/184264_2.png) [@Stewart\_Baker](https://forum.choiceofgames.com/u/Stewart_Baker)\
**Post date:** [October 31, 2026, 8:27pm UTC](https://forum.choiceofgames.com/t/how-to-wrap-the-text-area-in-an-image-border/179808/1 "2026-10-31T20:27:35Z")

</div>

@Jacic asked how I did this with Cake Shop Shadows, and I thought I’d put it here in case others are looking for instructions later!

note: You do have to go in and edit the CSS for this to work, and you also need somewhere to host the images (or, e.g. you need to put it all in a zip for distribution)

> **easy mode: just wrapping the text area in a frame**
>
> Once you have a .png image with your frame, open up the **style.css** file in the **choicescript-main/web** directory.
> 
> Make the following changes to the CSS:
> 
> ```choicescript
> #main {
> /* don't touch the existing CSS, just add this at the bottom! */
> background-image:url('file-name.png');
> background-size: 100% 100%;
> min-height:300px;
> }
> 
> ```
> 
> This will add your provided frame image and will stretch it to fill the background area both vertically and horizontally.
> 
> You may need to play around a bit with your frame image if (e.g.) the “frame” portions look too squished.
> 
> In my case, I made the center part of the image transparent. If you do that, and you want to change the background colour of the text area, you will also want to add a `background-color: #ABABAB` line of your choice. (I added it to `.container` instead of `#main` because I wanted the colour to go all the way to the top and bottom of the screen, not just inside the text area.)

For Cake Shop Shadows, I wanted to add more than just a frame around the text. I also wanted to pull in the top and bottom parts of the cover image, so that it looked like the whole game text was being wrapped inside the cover.

That is, here’s the cover:

 ![image of a storefront with "cake shop shadows" text in the window](https://global.discourse-cdn.com/choiceofgames/original/4X/4/9/e/49e77f4ad22e052390196304a0564d70e9ebc76f.png)

and here’s a screenshot of the game:

 ![choicescript game showing the player choosing a customer to serve. the header, frame, and footer look the same as the cover art](https://global.discourse-cdn.com/choiceofgames/original/4X/2/6/f/26f467342a9dad39acc51dde11eff7d909ca8754.jpeg)

You can see it’s not perfect (I just could not figure out how to get rid of the gap below the header buttons and before the `#main` CSS begins, bah)

> **slightly more finicky: Fake framing the whole thing**
>
> For this version, you’re actually going to make **three separate images**. One will go in the header area, in place of the title/author info. The second is the main frame. And the last part will go at the bottom, just below the game text.
> 
> You will want these to look like part of the same frame–make sure the “frame” parts bleed a little into the footer image, and are present in the top image as well.
> 
> Once you have your .png images with your frame, open up the **style.css** file in the **choicescript-main/web** directory.
> 
> After making the changes in “easy mode” for the main text frame, make the following change for the bottom banner:
> 
> ```choicescript
> .container {
> /* leave the rest of the CSS for this alone, and add the following: /*
> background-image:url('bottom-file-name.png');
> background-repeat: no-repeat;
> background-size: 100% 6em;
> background-position:bottom;
> }
> 
> #main {
> /* leave the rest of the CSS for this alone, and add the following: /*
> margin-bottom:4em;
> }
> 
> ```
> 
> This will add the “bottom part” of the frame at the very bottom of the container area, and the `#main` bottom margin adds enough space for it to appear in. Depending on the size of your “bottom part,” you may need to increase the margin size and vertical background size.
> 
> Then add the following new CSS immediately above `@media (max-width: 480px) or (max-height: 640px)`
> 
> ```choicescript
> #header {
> background:url('top-file-name.png');
> background-repeat: no-repeat;
> background-size: 100% 100%;
> }
> 
> #title {
> font-size: 1.25em;
> position: relative;
> padding-bottom: 1em;
> z-index: -999;
> }
> 
> #author {
> display: none;
> }
> 
> ```
> 
> Finally, _delete_ any rules for `#title`, `#header`, and `#author` which are in either of the @media rules. This will make sure the header appears on all screen sizes.

---

<div class="post-metadata">

**Author:** ![Jacic](https://sea3.discourse-cdn.com/choiceofgames/user_avatar/forum.choiceofgames.com/jacic/32/7061_2.png) [@Jacic](https://forum.choiceofgames.com/u/Jacic)\
**Post date:** [October 31, 2026, 8:40pm UTC](https://forum.choiceofgames.com/t/how-to-wrap-the-text-area-in-an-image-border/179808/2 "2026-10-31T20:40:26Z")

</div>

Thank you very much for the instructions. I didn’t realise it could be customised that way 😄

---

<div class="post-metadata">

**Author:** ![Stewart\_Baker](https://sea3.discourse-cdn.com/choiceofgames/user_avatar/forum.choiceofgames.com/stewart_baker/32/184264_2.png) [@Stewart\_Baker](https://forum.choiceofgames.com/u/Stewart_Baker)\
**Post date:** [October 31, 2026, 9:21pm UTC](https://forum.choiceofgames.com/t/how-to-wrap-the-text-area-in-an-image-border/179808/3 "2026-10-31T21:21:00Z")

</div>

It likely isn’t _meant to be_, to be fair… 😆

May well break things / get broken by things, and it was doing weird things on mobile… Alas!