Not able to set background image

Question

Hello everyone!

I already used the search function but i still can't set a background image. All the tipps and answers here on this board just doesn't work for me. Doesn't matter what i try, i still have that black-ish background color but not my image. I tried this:

background: url(../images/image.png) no-repeat center;

in all varities already. I just can't make it work. Does someone knows what i am doing wrong? And yes, i am adding those code lines in the stories style sheet.

Answer 1

Due to the fact that you can't view a Relative URL based image file while using the Test or Play options of the Twine 2 application I am going to assume that you are using the Publish to File option to create a Story HTML file, and that you are saving that Story HTML file within a folder that contains an images child-folder into which you have places your image.png file.

eg. Assuming your story HTML file was saved as story.html within a folder named C:\mystory then your folder/file structure would look like the following:

C:\mystory\
	images\
		image.png
	story.html

... then you could use CSS like the following within your story's Story Stylesheet area to display the background image with the attributes supplied within your example.

body {
	background-image: url("images/image.png");
	background-repeat: no-repeat;
	background-position: center;
}

 

Comments

Yes, that's exactly how i do it.

C:\mystory\
	images\
		image.png
	story.html

I want to do it this way, because it's more flexible. If i would set a specific path, moving that images would f*** up everything. Or giving the game to someone else to test it. That's why i decided to use the method above.

Unfortunately your code doesn't work. It's still the dark background color as before. I copy and pasted your code into my style sheet. Do i have to change something else as well?

---

I know my instructions work because I tested them just before making my previous comment, and here is a gdrive link to an archive containing the story.html file I used as well as the related folder and image file so you can test it yourself. **

Did you use the Publish to File option to create and save your story HTML file within the correct folder?

Is the image file a valid PNG file, and not another image format renamed as a PNG file.

(**) The file time-stamps are today because I deleted the test code and needed to recreate it again, and the files have been re-tested.

---

Hello!

Yes, i am using the "Publish to File" function and i am using the .html file. All images and even .mp3s are working except the background images. I don't know why.

I copy/pasted your code from your test file, renamed my background image and it still doesn't work. I tried it with .jpgs and .pngs. No difference.

Edit: I finally know what the problem was/is. I had this:

<div align='center'</div>

on top in my style sheet because i wanted to center the content. After i deleted the (not even working) code, your code worked . Thank you very much for your help and sorry for the trouble i caused.

---

The code snippet you showed is HTML and therefor invalid within the CSS based Story Stylesheet.

...wanted to center the content

Which content?
eg. The whole story, the text within the Passage area, the background image, etc...

...and centre it relative to which element?
eg. 

note: The HTML page of the SugarCube 2 documentation shows the main HTML elements that make up the default layout of the page. The HTML elements that make up the contents of the Passage being shown are inserted within the div element with an class of passage and one method you could use to centre all the text within that area is to add CSS like the following to your Story Stylesheet area.

.passage {
	text-align: center;
}

 

---

That did it!

Yes, i wanted to center everything. I don't like text and images on the left side for a story (or adventure in my case). Looks much better now! Thank you for your help! Much love. <3

---

I tried to repeat the above for a Harlow Twine but it isnt working, I still have a dark screen. What do I do? 

 

body{
  background-image: url("OTPMSUDAI-master/passageimage/background.jpg");
  background-size: cover;
}

that's what I have. The path I currently have is:

C:\OTPMSUDAI-master\
	passageimage\
		background.jpg
	index.html

SOS help needed... because I actually have a client waiting for this to be completed soon. EEk!

---

Hi!

Unfortunately i am not working with Harlow. But here is a help site:

https://twinery.org/wiki/harlowe:background