how to change the white background
Siddone
05 Apr 2017, 10:16Hallo. How to change the white background with a picture instead? I got a lot of complains that the white background (or any other solid color) is too boring. Since I'm trying to use Squiffy to write interactive fiction with, if possible, a small profit, it would be paramount to not have an interface that is seen as "boring" by the readers.
thetruespin
05 Apr 2017, 13:56you'll need to modify the corresponding .css file, which is outputted when you compile your game using the desktop editor. Alternatively you can modify the main Squiffy css template.
Siddone
05 Apr 2017, 15:41So, it's difficult but theoretically possible, right?
Siddone
05 Apr 2017, 16:12I'm in the style.CSS file. There are several values I can mess with, but I see nothing about background color.
Is it this one the thing to change? How do I insert the code of the picture I chose for background?
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 16px; margin-bottom: 16px;
}
Thanks
![](https://i.imgur.com/KMhOzNPb.png)
felixp7
05 Apr 2017, 18:25Why are you looking at a random section of the CSS? You want to customize under div#squiffy-container
, like you did for the width. Just add a background
property with either a color name for the value (stick to this list for simplicity), or else an image reference like this: url("background.png")
. Naturally, you'll have to put the image in the same folder as the CSS file, and package it with the rest of the game for distribution.
Siddone
05 Apr 2017, 21:01So it's like this:
background: url("background.png");
inside div#squiffy-container, right? where background.png is the name of the picture file?
Siddone
05 Apr 2017, 21:13I tried it, but the result is different than I thought. I wanted to have background the picture behind the game and on the side, but here the sides are still white and the background is in the middle, where I don't need it.
![](https://i.imgur.com/KMhOzNPb.png)
felixp7
06 Apr 2017, 05:24To cover the area outside the game proper, add a new section to the CSS, like this:
body
{
background: url("background.png") left repeat-y;
}
(Assuming that's what you want it to do -- tile vertically across the left-hand side of the page.)