0 votes
by (8.7k 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.7k 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.7k points)
Yes.  Twine 2.1.3 and Sugarcube 2.18.0
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.