How To Add Background Pictures In Twine

These are some CSS snippets that alter the Sugarcane format. Insert them straight into a "stylesheet" passage in your Twine games to use them. They probably won't work with Jonah, though.

I don't consider myself a graphic designer or spider web designer, so these are to be regarded solely as apprentice efforts.

Click here for live previews of all these stylesheets!

"Sodden Tome"
This requires Twine 1.4. Designed for slimy gloomy or spooky stories. "Wow! It actually looks similar it fell in a swamp!" - Marsh Boggart 341, Expiry Quadrant nine.

html {   groundwork-image: linear-slope(to lesser,  hsl(lxx, 39%, 30%), black);   background-image: -webkit-linear-gradient(summit,  hsl(70, 39%, 30%), black);   background-attachment: fixed;   background-color: blackness; } body {   groundwork-color: transparent;   margin: 2% 0 0 0;   font-size: 100%; }  #passages {   background-image: linear-gradient(-135deg, beige, #c6c66c);   background-image: -webkit-linear-gradient(-45deg, biscuit, #c6c66c);   background-color: beige;   width: xl%;   margin:automobile;   margin-bottom: 5%;   padding: 2em;   box-shadow: inset 0 0 2em olive; }  .passage {   margin: 0px;   padding: 2em;    /* Text formatting */   color: black;   font-family: "Times New Roman", serif;   text-marshal:justify; } .passage br + .char {   margin-left: 1.6em; }  .char.e + .char, .char.t + .char, .char.a + .char, .char.o + .char, .char.i + .char, .char.n + .char, .char:nth-child(8n) {   text-shadow: 0em 3px 0.3em hsla(82, 39%, 20%, .25);   colour: rgba(0,0,0,0.7); }  /* No sidebar */ #sidebar {   display:none; }  hr {   border: 0;   peak: 2px !important;   groundwork-color: black;   box-shadow: 0 0 1em darkolivegreen; }  /* Links */ .passage a .char {   color: hsla(82, 39%, xx%, .75);   text-shadow: 0em 3px 0.2em hsla(82, 39%, 20%, .25), 0em 6px 0.4em hsla(82, 39%, twenty%, .25); } .passage a:visited .char {   color: hsla(37, 39%, twenty%, .75);   text-shadow: 0em 3px 0.2em hsla(37, 39%, 20%, .25), 0em 6px 0.4em hsla(37, 39%, 20%, .25); } .passage a:hover {   text-decoration: none; } .passage a:hover .char {   color: darkgreen !of import; } .passage a:visited:hover .char {   colour: darkred !important; }

"Muet"
This requires Twine 1.four. The background image is not included - but if yous add an embedded image with the name "background", it will be used by this stylesheet! Likewise, this has no sidebar, but the StoryTitle, StorySubtitle and StoryAuthor.

@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:300|Oxygen:400,700&subset=latin,latin-ext);  html {   background: [img[groundwork]] fixed, dodgerblue;   background-size: cover;   min-height: 100%;   peak:100%; } body {   background-colour: rgba(0,0,0,0.four);   background-zipper: fixed;   margin: 0;   padding: 0% 15% 0% 5em;   font-size: 100%;   font-family: Oxygen, "Century Gothic", sans-serif !important;   font-weight: 300;   min-height: 100%; } #sidebar, #passages {   padding-height: 4em;   padding-bottom: 0em; } #passages {   margin-left: lx%;   width: 50%;   min-height: 100%;   padding-lesser: 0;   margin-lesser: 0;   border: 0; } #passages::before {   border-left: 3px solid rgba(255,255,255,0.2);   position:stock-still;   height:100%;   left: fifty%;   top:0;   content:''; } .passage {   margin: 0px;   colour: white;   opacity: 0.7;   font-size: 100%;   text-align:justify;   margin:automobile;   padding: 0px 0px 5em 0px; } .passage a {   color: #cde8ff;   opacity: 1; } .passage a:hover {   color: white;   text-decoration: none;   edge-bottom: 1px white solid; } .passage a:visited {   color: #d7ffcd; } #sidebar {   left: 1em;   width: 50%;   font-family: "Alegreya Sans","Century Gothic",sans-serif !important; } #sidebar li {   color: white !of import;   text-align: center;   opacity: 0.3; } #sidebar #storyTitle {   font-size: 4em;   line-height:0.8em; } #sidebar > :not(.storyElement) {   display:none; } /* Shrink the page when viewed on devices with a low screen width */ @media screen and (max-width: 1600px) {   .passage, #sidebar { font-size: ninety%; } } @media screen and (max-width: 1200px) {   #sidebar { font-size: 70%;}   .passage { font-size: 85%;} } @media screen and (max-width: 960px) {   #passages::earlier { display:none; }   #sidebar { position: relative; width: 100%;}   #passages { margin: 0; padding: 5%; width: ninety%; border: 0; } }

"Simple Centered"
The "simple" stylesheets are designed to be shorter and more than customisable than the others. This one merely consists of passage text, centered horizontally AND vertically inside the window, along with a colour gradient background. See the code comments for places where colours and values tin easily be changed.

html {   width: 100%;    /* Vertical colour slope */   background-image: linear-gradient(to lesser,  black, midnightblue);   background-image: -webkit-linear-slope(top,  black, midnightblue);   groundwork-attachment: stock-still;    /* Fallback colour */   groundwork-color: midnightblue;    /* Vertical centering */   height: 100%;   display: table; } trunk {   /* Remove default styles */   font-size: 100%;   background-color: transparent;   margin: 0;    /* Vertical centering */   height:100%;   display:table-cell;   vertical-marshal: middle; } #passages {   border-left: 0px;   margin: 0;   /* Keep a gap at the top and lesser of the page,       when the text is longer than the window'due south acme. */   padding: 5% 0; }  .passage {   /* Passage width */   width: 60%;   /* Horizontal centering */   margin: 0 machine;    /* Text formatting */   colour: white;   font-size: 100%;   text-align:heart; }  /* No sidebar */ #sidebar {   brandish:none; }  /* Links */ a.internalLink, a.externalLink {   color: cornflowerblue; } a.internalLink:hover, a.externalLink:hover {   color: lightskyblue;   text-decoration: none; }  /* Shrink the folio when viewed on devices with a low screen width */ @media screen and (max-width: 960px) {   .passage { font-size: 90%; width: 70%; } } @media screen and (max-width: 840px) {   .passage {  font-size: 87.five%; width: 80%; } } @media screen and (max-width: 720px) {   .passage { font-size: 75%; width: xc%; } }

"Simple Box"
Displays the passage text in a box, centered in the upper middle of the page, in front of a colour gradient.
See the code comments for colours and values that can be customised.

html {   /* Vertical colour gradient */   background-epitome: linear-gradient(to bottom,  gainsboro, silver);   groundwork-image: -webkit-linear-gradient(summit,  gainsboro, argent);   background-attachment: fixed;    /* Fallback color */   background-colour: argent; } body {   /* Remove default styles */   background-color: transparent;   margin: 10% 0 0 0;   font-size: 100%;   /* Used to center the box */   text-align: center; }  #passages {   /* Box background (white with 70% opacity) */   background-color: rgba(255, 255, 255, 0.7);    /* Edge */   edge: 2px solid white;    /* Rounded corners */   border-radius: 1em;    /* Box width */   width: lx%;    /* Eye the box */   display: inline-block;   min-pinnacle: xl%;   margin:auto;   margin-bottom: 5%;   padding: 0px; }  .passage {   margin: 0px;   /* Inner margin within the box */   padding: 2em;    /* Text formatting */   color: black;   font-size: 100%;   text-align:justify; }  /* No sidebar */ #sidebar {   display:none; }  /* Links */ a.internalLink, a.externalLink {   color: royalblue; } a.internalLink:hover, a.externalLink:hover {   colour: deepskyblue;   text-decoration: none; }  /* Shrink the page when viewed on devices with a low screen width */ @media screen and (max-width: 960px) {   .passage { font-size: 90%;}   #passages { width: 70%; } } @media screen and (max-width: 840px) {   .passage {  font-size: 87.five%; }   #passages { width: fourscore%; } } @media screen and (max-width: 720px) {   .passage { font-size: 75%; }   #passages { width: 90%; } }

"Squillions"
"It's a Twine game that you tin can imagine James Bail playing." ? Ian Bogost.

head {   box-shadow: inset 0px 0px 30em #bbb;   width:100%;   top:100%;   display:block;   position:fixed; } caput * {   brandish:none; } torso {   background-colour:#fff;   margin: 0;   text-align:centre; } #passages {   border-left: 0;   margin: 0;   padding: 0;   line-peak:100vh; } .passage {   position:accented;   top: 0;  bottom: 0;  left: 0;  correct: 0;   width: 75%;   height: 75%;   margin:motorcar;   font: bold 6em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;   color: #000;   letter of the alphabet-spacing: -0.05em;   text-align:center; } #sidebar {   display:table;   position:stock-still;   top: 0; left: 0;   width:100%;   peak:100%; } #sidebar #championship {   display:table-prison cell;    vertical-align:center;   text-align:centre; } #sidebar #title #storyTitle {   font: bold 12em/1.25em Helvetica, "Helvetica Neue", Arial, sans-serif;   alphabetic character-spacing: -0.05em;   colour:rgba(0,0,0,0.15); } #title :not(#storyTitle){   display:none; } #storymenu, #snapback, #restart, #share, #credits {   display:none; } a.internalLink:hover, a.externalLink:hover {   colour:#de0000 !of import;   text-decoration: none; } a.internalLink:nth-kid(3n), a.externalLink:nth-child(3n) {   color: #666; } a.internalLink:nth-kid(3n+1), a.externalLink:nth-child(3n+1) {   color: #777; } a.internalLink:nth-child(3n+ii), a.externalLink:nth-child(3n+2) {   colour: #888; } @media screen and (max-width: 960px) {   torso { font-size: 50%; } } @media screen and (max-width: 840px) {   body { font-size: 40%; } } @media screen and (max-width: 720px) {   body {      font-size: 30%;   } }

"The Globe's Story Illustrated"
Best used with a dissolve transition.
This stylesheet is capable of displaying a 480-pixels-tall scene image above every passage'due south text! You tin can ready scene images using Tag CSS. To assign, say, the image "classroom_afternoon" to the tag "classroom", just create a stylesheet tagged "stylesheet classroom" and put this in information technology:

.passage .header {   groundwork-epitome: [img[classroom]]; }

And then tag various passages with "classroom" to utilize the prototype.
To accept multiple images overlaid on each other, add together multiple img declarations separated past commas, in order from frontmost to rearmost:

.passage .header {   background-epitome: [img[character-funnycry]], [img[classroom]]; }

That'south how you do information technology!

#sidebar {   display:none; } body {   margin: 0;   padding: 0;   height:100%; } #passages {   margin:0;   padding: 0;   top:100%; } #passages * {   box-sizing: border-box;   -moz-box-sizing: border-box; } .passage {   position:relative;   width: lx%;   font-size:2em;   font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;   margin: 2em auto 0 auto; } .passage .header {   width:100%;   elevation:480px;   min-height: 480px;   border: #fff double 0.5em;   edge-radius: 1em;   margin: 0 auto 1.5em automobile;   padding: 0;   background-position: heart;   background-repeat: no-repeat; } .passage .content {   pinnacle: 500px;   width:100%;   border: #fff double 0.5em;   border-radius: 1em;   padding: 1em; } a.internalLink, a.externalLink {   border-lesser: solid #fff 1px;   color:#eee;   font-weight:normal; } a.internalLink:hover, a.externalLink:hover {   text-decoration:none;   border-bottom: none;   color:#000;   background-colour:#fff;   font-weight:normal;   padding-left: 0; } a.internalLink:active, a.externalLink:active {   edge-bottom: 0; } @media screen and (max-width: 960px) {   .passage {     font-size: ane.5em;   width: 75%;   } } @media screen and (max-width: 640px) {   .passage {     font-size: 1.25em;   width: 95%;   } }

"Remembering the 90'due south"
Best used with an instant passage transition.

body {   background:LightGrey;   colour: #000;   font: medium "Times New Roman", Times, serif;   margin: auto;   padding: 8px; } #passages {   margin: auto;   border: 0;   padding: 0; } .header, .footer {   border: 1px inset;   margin: 0.5rem auto; } .passage {   font: inherit;   line-summit: inherit;   margin: auto; } .passage ul {   padding: 0;   text-align: left; } .passage li {   brandish:inherit;   margin: 0; } a, #sidebar #snapback, #sidebar #restart, #sidebar #share, .card div {   font-weight:inherit !important;   text-ornament: underline !of import;   color: #00F !important; } a.visited {   colour: #7F007F; } #sidebar {   font: inherit !of import;   position:static;   width: auto;   list-style: disc exterior; } #sidebar ul {   padding: inherit; } #sidebar li {   color: inherit;   text-align:inherit;   margin:inherit;   brandish:inline; } #sidebar #titleSeparator {   display:none; } #sidebar #title, #sidebar #title:hover {   color:inherit; } #sidebar #storyTitle, #sidebar #storyTitle:hover {   font-size: 2rem;   margin: .67rem 0;   font-weight:assuming; } #sidebar #storySubtitle {   font-size: inherit;   font-weight:bold; } #sidebar #storyAuthor::before {   content: "by "; } #sidebar #storyAuthor {   font-size:medium;   display:block;   font-weight:bold !of import; } #sidebar #credits {   display:block;   font-size: smaller;   padding: inherit; } #snapbackMenu::earlier {   content: "Rewind to:";   font-weight:assuming; } #shareMenu::before {   content: "Share this story at:";   font-weight:assuming; } .carte du jour::before {   content: "Rewind to:";   font-weight:assuming; } .bill of fare, .menu div:hover {   position: static;   background-color:inherit;   color:inherit;   opacity:1;   edge:0;   font:inherit;   line-height:inherit; } .card div {   margin: 0 1.12rem;   brandish: list-item;   list-style:disc outside; }

"Porthole"
Features: Very roughly inspired by the title screen of "The Bounding main Will Claim Everything"; Designed for games with brief passage text. No sidebar.

trunk {   width: 100%;   margin-left: 0;   text-align:heart; } #passages {   position:relative;   brandish:inline-block;   font-size: 1.5em;   background-color:skyblue;   background-image: -webkit-linear-slope(top, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);   groundwork-prototype: linear-gradient(to bottom, #87ceeb 0%,#87ceeb 75%,#008eed 75%,#008eed 100%);   width: 60em;   height: 60em;   border-radius: 30em;   border: darkgoldenrod 1em solid;   margin-left: 0;   padding-left: 0; } .passage {   position: absolute;  text-align:center;   pinnacle: 20em;   lesser: 0;   margin: -10em 5em car 5em;   display:inline-cake;   width: 40em;   tiptop: 40em;   overflow-y: hidden;   box-shadow: 0 0 2.5em ii.5em; } a.internalLink, a.externalLink {   color: white;   font-size: 1.2em; } a.internalLink:hover, a.externalLink:hover {   color: white;   text-decoration: none;   text-shadow: 0 0 0.5em white; } .passage .torso {   color: white; } #sidebar {   brandish:none; } @media screen and (max-width: 960px) {   body { font-size: 55%; } } @media screen and (max-width: 840px) {   body { font-size: 45%; } } @media screen and (max-width: 720px) {   torso { font-size: 40%; } }

"The Earth's Story i.0"
Features: No sidebar. Like to ZX Spectwine, beneath. Reminiscent of early 90s Nintendo RPGs - hence its grey sensibilities. Use Tag CSS and tag your passages "mint", "strawberry", "banana" or "peanut" to get different coloured borders for specific passages!

torso {   margin: 0;   background-colour:#000; } #passages {   margin: 0;   padding: 0;   border: 0; } .passage {   width: 40%;   min-width: 26em;   height: 33%;   min-height: 33%;   font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;   letter-spacing: 0.1em;   padding: ane.5em;   padding-left: 2em;   font-size:1.8em;   groundwork-color:#000;   colour:#eee;   margin: 10%;   border: silver ridge 0.8em;   border-radius: 1em; } .passage[data-tags~=mint] {   edge-colour: MediumAquaMarine; } .passage[data-tags~=strawberry] {   border-color: HotPink; } .passage[data-tags~=banana] {   border-color: Gold; } .passage[data-tags~=peanut] {   border-colour: Peru; } .content::before {   content: '&#8226;';   position: relative;   left: -0.6em;   margin-right: -0.4em; } a.internalLink, a.externalLink {   border-bottom: solid #fff 1px;   color:#eee;   font-weight:normal; } a.internalLink:hover, a.externalLink:hover {   text-ornamentation:none;   border-bottom: solid #fff 2px;   color:#fff;   font-weight:normal;   padding-left: 0; } a.internalLink:agile, a.externalLink:active {   border-lesser: 0; } #sidebar {   display:none; }

"Hypercane 1.ane"
As used in Myriad
Features: Sidebar is converted to a top bar (minus Share); vaguely resembles Organization 6, but nowhere nearly enough for true aficionados.

body {   margin: ten% 0 10% 0; } #passages{   margin: 0;   padding: 0;   border: 0; } .passage, #sidebar * {   font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;   colour:#000;   text-align:left; } .passage {   border-radius: 0.2em;   width: 60%;   margin: auto;   padding: 2em;   font-size:1.5rem;   groundwork-colour:#fff;   border: solid #000 0.05em;   box-shadow: #000 0.5em 0.5em 0; } a.internalLink, a.externalLink {   border: solid #000 0.05em;   white-space: nowrap;   padding: 0.1em 0.2em 0.1em 0.2em;   edge-radius: 0.5em;   colour:#000; } a.internalLink:hover, a.externalLink:hover {   text-ornamentation: none;   box-shadow: #000 0 0 0 0.1em;   color:#000; } a.internalLink:agile, a.externalLink:active {   color: #fff;   groundwork-color:#000; } body {   background:url(information:prototype/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC); } #sidebar {   position:absolute;   top:0px;   left:0px;   width:99.2%;   overflow-x:subconscious;   background-color:#fff;   border-lesser: solid #000 1px; } #sidebar * {   color: #000 !of import;   font-size:1.5rem;   background-color:clear !important;   display:inline !of import; } #sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {   text-decoration:underline !of import; } #sidebar a:agile, #sidebar #snapback:active,  #sidebar #restart:active  {   color:#fff !important;   font-size:1.5rem;   background-color:#000 !of import;   display:inline !important; } #sidebar li, #sidebar li > bridge {   margin-left: 1rem;   margin-right: 1rem; } #sidebar a, #sidebar a:hover {   edge: 0 !important;   box-shadow: none; } .card {   background-color:#fff;   color:#000;   opacity:1;   font-size: 1.5rem;   border: solid #000 1px;   box-shadow: #000 0.1em 0.1em 0; } .carte div:hover {   groundwork-color:#000;   color:#fff; } #credits, #share, #titleSeparator, #sidebar li br {   display:none !important; }

"Closed In"
As used in Lonely
Features: No sidebar; Enormous screen-filling font size designed for very terse stories; Font should scale downwardly on mobile devices.

body {   margin: 2%; } #passages{   margin: 0;   padding: 0;   border: 0;   width:96%;   margin: machine; } .passage {   font-size:6em;    color: #888;   text-shadow: #888 0 0 0.05em; } @media screen and (max-width: 960px) {   .passage {     font-size: 4em;   } } @media screen and (max-width: 640px) {   .passage {     font-size: 3em;   } } a.internalLink, a.externalLink {   colour: #eee;   text-shadow: #eee 0 0 0.07em; } a.internalLink:hover, a.externalLink:hover {   colour: #fff;   text-decoration: none;   text-shadow: #fff 0 0 0.09em; } #sidebar { 	display:none; }

"Orange Highlight"
Equally used in To my Grandma
Features: No sidebar; External links are a unlike colour to internal links.

trunk {   margin: 5% 0 0 0;   background-color:#000; } #passages{   margin: 0;   padding: 0;   border: 0; } .passage {   font-family: "Times New Roman",serif;   text-align:left;   color:#000;   width: 40em;   padding: 2em;   font-size:3em;   background-color:#fff;   background: -webkit-linear-slope(left, #aaa 0%,#fff 19%);   background: linear-gradient(to correct, #aaa 0%,#fff 19%); } a.internalLink {   colour:#620;   groundwork-colour:hsla(48, 100%, fifty%, 0.five); } a.externalLink {   colour:#602;   background-colour:hsla(320, 100%, fifty%, 0.v); } a.internalLink:hover {   colour:#410;   background-color:hsla(40, 100%, l%, 0.85);   text-ornament: none; } a.externalLink:hover {   color:#401;   background-color:hsla(320, 100%, 50%, 0.85);   text-decoration: none; } a.internalLink:agile {   colour:#140;   background-color:hsla(80, 100%, 50%, 0.85);   text-decoration: none; } a.externalLink:agile {   color:#104;   background-colour:hsla(280, 100%, 50%, 0.85);   text-decoration: none; } #sidebar {   display:none; }

"Warm Motel"
Features: no sidebar; denotes a vague retention of varnished wood every bit approximated by the MS PowerPoint designers.

body {   margin: 0;   padding: 0; } #passages {   margin: 0 5% 0 v%;   padding: 2.five% 0 5% 0;   border-left: saddlebrown solid ane.5em;   height:auto;   groundwork: #3d1d08;   background: -webkit-radial-gradient(center, ellipse cover,  #3d1d08 0%,#000000 80%);   background: radial-gradient(ellipse at center,  #3d1d08 0%,#000000 80%); } .header {   width: 25%;   border-peak: saddlebrown solid 0.1em;   margin: auto;   padding: 0 0 two.v% 0; } .passage {   margin: 2em;   font-family: "Georgia", serif;   font-size:two.2em;    color: peru;   text-shadow: sienna 0.05em 0.05em 0.05em; } a.internalLink, a.externalLink {   color: burlywood;   text-shadow: peru 0.05em 0.05em 0.05em; } a.internalLink:hover, a.externalLink:hover {   color: cornsilk;   text-ornamentation: none;   text-shadow: republic of peru 0.05em 0.05em 0.05em; } #sidebar { 	display:none; }

_{Experience free to study whatever bugs to @webbedspace.}