Image Scaling Too Large

Authoring Twine
1

So I’m back from my last post, I’ve fixed the issue I had with having images appear, but I’m running into a new issue.

On some of my passages, the text is long enough that it warrants a bit of a scroll. However, whenever this occurs, it stretches the image out further towards the right, cutting off part of the image. Is there any way to fix this?

Here’s the code I’m using, by the way:
tw-story[tags~=“Tag here”] {
background-image: url(“URL here”);
background-repeat: no-repeat;
background-size: cover;
}

2

Bumping this because I’m still having this issue.

3

That’s what background-size: cover does: it makes sure the image covers the entire space. So if the page rectangle is a different shape than the image, either the right side or the bottom will be cut off (depending on whether the page is taller-and-narrower or shorter-and-wider than the image).

Does background-size: contain do what you want?

2 Likes
4

Well this definitely does help, but what I was hoping for was the image would sort of stay static while the text alone scrolls, rather than the background just appearing as a black screen beneath the image if the passage is too long. Though now I’m seeing I probably need a bit more for that

5

Ah. Try background-attachment: fixed

1 Like
6

Exactly what I was lookin’ for! Thanks so much