Background Image Not working

Authoring Twine
1

Twine Version:
[also choose a Story Format tag above]
2.6

So I’m trying to make a background image using file location(Code for it: (Sample Code) And it won’t appear for some reason when I try to code it in using css can anyone explain why?

This is my java script code:

if (document.location.href.toLowerCase().includes(“/temp/”) || document.location.href.toLowerCase().includes(“/private/”) || hasOwnProperty.call(window, “storyFormat”)) {

// Change this to the path where the HTML file is

// located if you want to run this from inside Twine.

setup.Path = "C:\\TrueFolder\\Twine\_index";  // Running inside Twine application

} else {

setup.Path = "";  // Running in a browser

}

setup.ImagePath = setup.Path + “images/”;

setup.SoundPath = setup.Path + “sounds/”;

This is my code in StoryInit:
<<set _imag3 = setup.ImagePath + “wallpaper.jpg”>>

CSS code:

body {

color: #fff;
background-color: #000;
background: url(“wallpaper.jpg” _imag3);
font-family: ‘Inconsolata’, monospace;
text-align: center;
padding: 0;
}

2

note: The value you are assigning to setup.Path when running inside the Twine application needs to end with a slash character.

If the folder & file structure on your local hard-drive is actually the following…

C:\TrueFolder\
	images\
		wallpaper.jpg
	sounds\

…then the value you are assigning to setup.Path when running inside the Twine application then the value you assign to the variable should look something like…

setup.Path = "C:/TrueFolder/";  // Running inside Twine application

Re: The background: url(“wallpaper.jpg” _imag3); property assignment in your CSS example.

You can’t access Story or Temporary variables in the Story > Stylesheet area of your project, so you will need to find a different technique to alter which background image is being shown.

2 Likes
3

So then how can I make it show in my CSS file

4

Cause to be honest it seems like my body code itself just does nothing, i try to put it like this:

#body {
background-image: url(“C:\TrueFolder\images\wallpaper.jpg”);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
and all i get is a gray background screen

5

There are a couple of issues with your latest CSS example:

1: Your example CSS rule has a # character before the body name in its CSS Selector, and as shown in the documentation if just linked to, that character has special meaning when added to the start of a selector.

It instructs the web-browser that that rule targets any HTML element that has been assigned an ID attribute with a value of “body”…

<div id="body"> ...this element would be targeted... </div>

<p id="body"> ...as would this element...</p>

However, your previous CSS rule was targeting an element that had an element-type of body instead…

<body> ...the content of the HTML page's body element... </body>

Remove the # character from the start of the #body CSS selector should fix which HTML element is being targeted.

2: The back-slash \ characters you’re using to delimit the folder & file names in your URL aren’t escaped, and as I explained in your previous question about this same topic, you should be using forward-slash / characters as the delimiter.
eg. Change the following line in your CSS…

background-image: url("C:\TrueFolder\images\wallpaper.jpg");

…to be the following instead…

background-image: url("C:/TrueFolder/images/wallpaper.jpg");

…and the back-ground image on your local hard-drive should now be locatable while using the Twine 2.x application’s Test & Play options.

However, using a Absolute URL like your C:/TrueFolder/images/wallpaper.jpg will cause issues for anyone else viewing the Story HTML file you generate, because they aren’t likely to be storing that HTML file in a folder named TrueFolder on the C drive of their comuter.

I strongly suggest you switch to using Relative URLs when accessing your project’s media files…

background-image: url("images/wallpaper.jpg");

…even though that will mean you will no longer be able to see/hear the output of those files while using the Twine 2.x application’s Test & Play options, and that you will need to use the Publish to File option instead. Because doing this will allow others to access those media files when you release the Story HTML file you generate.

6

Yeah I fixed it a couple hours ago. But i think twine was just buggin out, cause i wanted like an hour and published it to file again and it worked for some reason.

1 Like