{"id":1073,"date":"2016-04-18T23:41:19","date_gmt":"2016-04-19T04:41:19","guid":{"rendered":"http:\/\/www.klcameron.com\/cdm\/?p=1073"},"modified":"2016-04-18T23:41:19","modified_gmt":"2016-04-19T04:41:19","slug":"twine-tutorial-6","status":"publish","type":"post","link":"https:\/\/www.klcameron.com\/cdm\/twine-tutorial-6\/","title":{"rendered":"Twine Tutorial"},"content":{"rendered":"<p>How to set the background of you webpage as an image in Twine<\/p>\n<p>1.) Open up Twine and select and save the image you would like to use for your background.<\/p>\n<p>2.) Once you have the image you would like to select, you need to go add a new stylesheet to your Twine project. You can add a new stylesheet by going to Story &#8211;&gt;New &#8211;&gt; Stylesheet<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-1074 alignleft\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?resize=625%2C351\" alt=\"twine1\" width=\"625\" height=\"351\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?resize=624%2C351&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine1.jpg?w=1250 1250w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<p>3.) This will take you to a new stylesheet that has not been filled in at all yet. Click on the stylesheet, and the empty one should look something like this.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1075\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?resize=625%2C351\" alt=\"twine2\" width=\"625\" height=\"351\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?resize=624%2C351&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/twine2.jpg?w=1250 1250w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<p>4.)In the body section of the stylesheet between the curly brackets, indent and the place the tag \u201cbackground-image:\u201d in the stylesheet.<\/p>\n<p>5.) After placing this tag here, you need to put the .jpg filename right after \u201cbackground-image:\u201d, but the image you want to use must be inserted using the code Twine uses to insert pictures. The format goes like this: [img[your_filename.jpg]]. And the whole statement must end with a semi-colon (;).<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-1076\" src=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?resize=625%2C351\" alt=\"Twine3\" width=\"625\" height=\"351\" srcset=\"https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?w=1366&amp;ssl=1 1366w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?resize=300%2C169&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?resize=768%2C432&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?resize=1024%2C576&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?resize=624%2C351&amp;ssl=1 624w, https:\/\/i0.wp.com\/www.klcameron.com\/cdm\/wp-content\/uploads\/2016\/04\/Twine3.jpg?w=1250 1250w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/a><\/p>\n<p>6.)After this, you should have successfully inserted an image as your webpage\u2019s background.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to set the background of you webpage as an image in Twine 1.) Open up Twine and select and save the image you would like to use for your background. 2.) Once you have the image you would like to select, you need to go add a new stylesheet to your Twine project. You [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[29],"class_list":["post-1073","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-twine-tutorial"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/comments?post=1073"}],"version-history":[{"count":1,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1073\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/posts\/1073\/revisions\/1077"}],"wp:attachment":[{"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/media?parent=1073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/categories?post=1073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.klcameron.com\/cdm\/wp-json\/wp\/v2\/tags?post=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}