How to make a full screen background element?

Question

Images in my Twine game currently look like this:

http://i.imgur.com/nj74Uz1.png

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

http://i.imgur.com/cGOhsol.png

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]].

 

Answer 1

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

CSS:

.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">.

Answer 2

Is this Sugarcube?

Comments

Yes.  Twine 2.1.3 and Sugarcube 2.18.0