Twine Sugarcube background image with link

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version:2.2.1
Story Format: SugarCube 2.21.0

Hi. I’m trying to create a background image with text that will then support an active link to the next story box. I went to W3Schools Online web tutorials to find code that would work and I’m halfway there. I can get a background image that I can type text onto but I can’t get the [[link]] to be clickable. I’m a total newbie when it comes to SugarCube and HTML. I’m probably trying to do something it’s not intended to do OR I just don’t have the understanding, yet, of how all the variables, syntaxes, etc. work- so I’m probably missing something that tells the image to just be in the background and let “[[ ]]” do it’s job
Here is the code I used in the stylesheet:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

Here is the code I’ve used on the page:

<html>
<body>

<h2>Experimental</h2>

<p>[[experimental2]]</p>

<div class="container">
  <img src="images/map.jpg" width="1000" height="300">
  <div class="center">This would be the text that the reader will see. It will be written over the image I choose. I can maybe add other images over the top of the background image and I'll try that in the next[[clickable]]link</div>
</div>

</body>
</html>

Here’s what it looks like when it’s played:

image
image1756×1560 94.5 KB

Neither of the links work. Not the one outside of the image block or the one on the image.
What am I missing?
Thanks!

1 Like
2

Welcome Laura!

You shouldn’t declare <html></html> and <body></body> in your passages.

I’ve run your code except for aforementioned tags and it seems to run fine.

Edit:
I’m also pretty sure you shouldn’t declare anything but the styles proper in your stylesheet.

.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}

<h2>Experimental</h2>

<p>[[experimental2]]</p>

<div class="container">
  <img src="images/map.jpg" width="1000" height="300">
  <div class="center">This would be the text that the reader will see. It will be written over the image I choose. I can maybe add other images over the top of the background image and I'll try that in the next[[clickable]]link</div>
</div>
2 Likes
3

Thank you SO much!! I just removed those things and it works great for me now. I had hoped it would be something simple but I was so focused on it last night that I couldn’t see what I was doing wrong.
Yay! This will totally work for my project.
L

1 Like
4

Just a note, probably something you all know but I just figured out…
Because of setting the opacity of to 0.3, all images I added became very faded. What I did to solve that was add a class tag differentiating each type of image.
.image1 {
width: 100%;
height: auto;
opacity: 0.3;
}
.image2 {
width: 100%;
height: auto;
opacity: 1.0;
}
When I want the normal picture in my passage, I add the class tag:

<img src="images/organized.jpg" class="image2">
That gives me the full color. 
And with class="image1", I get the faded background.
1 Like