0 votes
by (8.9k points)

Images in my Twine game currently look like this:


I think it would look nice and modern if they had a full width coloured background instead, like this:


Is this possible in Twine?  I tried putting the <img> inside a <div> with the style="width:100%; background-colour:black;", but the black background only stretched as far as the column width.

My code:

<span class="heading"><b>THE CITADEL</b>, WIDOW SYSTEM
JUNE 5 | 0656 HRS LOCAL</span>

The five "arms" of the Citadel are known as the <b>Wards</b>.  Each Ward is a city the size of Manhattan and is home to millions of aliens and a few thousand humans.

<img src="https://i.kinja-img.com/gawker-media/image/upload/s--Rt1i_8Md--/c_scale,fl_progressive,q_80,w_800/18k0831zhzicxpng.png" />

You've docked at <b>Zakera Ward,</b> where your contact should already be waiting at a bar called Faemina's.  The first thing you need to do is get through [[customs]].


2 Answers

0 votes
by (8.9k points)
Best answer

In case anybody is interested, I figured out how to do this.


.full-width-borders {
  /* also subtract section padding (1.5rem) */
  margin: 0 -601.5rem;
  /* add back section padding (1.5rem) */
  padding: 0rem;
  background: black;
  /* border has to be solid, not RGBa */
  /* 9600px or equiv (600rem = 9600/16) */
  border-left: 600rem solid black;
  border-right: 600rem solid black;

img {
  	display: block;

In the game passage, place the <img> inside a <div class="full width borders">.

–1 vote
by (6.2k points)
Is this Sugarcube?
by (8.9k points)
Yes.  Twine 2.1.3 and Sugarcube 2.18.0