0 votes
by (150 points)

Greetings!

This is my first time creating story on twine and furthermore, I am not a programmer so it is pretty hard for me to work on this. On the other hand, I am willing to learn. Right now, my problem is I want to re scale any large images to fit to screen so the only browser scroll bar my game have is under the StoryMenu.

The following are CSS or HTML:

Twine 2.2.1.
SugarCube 2.21.0
Browser that I am using right now is chrome.
Current Images trying to re scale: 1366x768
Proofread: https://pastebin.com/Ya8FtPBN

Tried script in passage:

<img src="images/Logo.png" alt="rawr" max-width: 100%; max-height:100%;/>

<img src="images/Logo.png" alt="rawr" width: 100%; height:100%;/>

Tried script in Stylesheet:

<style> img{
    max-width: 100%
    max-height:100%;
}


    background: url(images/Logo.png);
    background-repeat: no-repeat;
    background-size: 300px 100px;
}

background-image
    background-image: url(images/Logo.png);
    background-repeat: no-repeat;
    background-size: 300px 100px;
}

========

I tried this code it ruined my twine:
html {
    background: [img[rawr]] no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    html {
        background: [img[rawr]] no-repeat center center fixed;
    }
}

Sorry if those script or codes are painful to read, if you're going to help me, please be specific, I'm still getting confuse where to put the script whether special passage or any passage, Javascript or Stylesheet. Thank you in advance!

1 Answer

0 votes
by (38.4k points)
selected by
 
Best answer

There is no easy way to prevent the vertical scrollbar from showing up, short of disabling it completely, because you may simply have more content than can fit on screen.

If you wanted to disable the scrollbars completely you could use this:

body {
	overflow: hidden;
}

However, that just means that content could go off the bottom of the screen and you wouldn't be able to scroll to it.

If you're displaying an image in the passage, you're better off just setting the max width of all img elements like this:

img {
	max-width: 100%;
}

or you could set it for individual images like this:

<img src="images/Logo.png" style="max-width: 100%;">

(Note how the "max-width" is inside of a style parameter.)

If you wanted to, you could also set a "max-height" of say "200px" if you don't want them to be any taller than that.

Now, setting a background image is different, since it will be behind your text.  For that you'd do something like this:

body {
	background-image: url('images/Logo.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	overflow-y: scroll;
	overflow-x: hidden;
}

That would make the logo fill the background behind the text, and it won't move if you move the scrollbar, just the text will move.

If you want that background image to only appear in passages that have a "logo" tag, then you could change "body" to "body.logo" (see the SugarCube documentation here for details).

Hope that helps! smiley

P.S. The "<style>" tag should not be in the stylesheet.  Twine takes care of that automatically.  Also, you can't use Twine or SugarCube code in your stylesheet.  It should be pure CSS.

by (150 points)
I'm sorry for the trouble sir, you really help me a lot specially regarding to this concern and I learned from you regarding coding. I really appreciate it and you're amazing! More powers to you!
...