Making the background image stay in place

broadwaydude

19 May 2019 02:31

So what I've realized in my time working up the CSS code that when I continue to keep clicking links in my Squiffy game and the text gets longer and longer, the image begins to get larger. It's as if the length of the text is what defines the size of the canvas. I've found ways to keep it the same size, but when the text adventure goes on, the image stays at the top of the game so that when you scroll down, you only get the background color. I want to be able to scroll and only have the text scroll and the image stay perfectly in place. If there are any questions on what I mean by this, I'd be happy to specify further.

bawpie

24 May 2019 20:32

Not 100% sure if it's what you need but you could try the solution posted here. To get it to work, you'd need to amend the style.css to include the following css:

img.centered {
    position:fixed;
    width:  100px;
    height: 100px;
    left: 50%;
    top:  50%;
    margin-left: -50px; /* 100px/2 = 50px */
    margin-top:  -50px; /* ditto */
}

And you'd also have to amend the index.html to include the image a la

<body>
		<div id="squiffy-container">
			<div id="squiffy-header">
				<a class="squiffy-header-link" id="restart" tabindex="0">Restart</a>
			</div>
			<div id="squiffy">
	                <!-- INSERTED IMAGE)-->	
			<img src="https://code.todoyu.com/export/4056/todoyu/trunk/core/assets/img/ajax-loader-large.gif" class="centered" />
	              <!-- END OF AMENDED CODE-->	
			</div>
		</div>
	</body>

You could amend the index.template and css.template files otherwise you'll need to update the html/css every time you build the file ( as discussed here.)

mrangel

25 May 2019 10:10

The CSS you want is probably:

background-attachment: fixed;

It's lke position: fixed, but for the background image rather than a whole element.

This topic is now closed. Topics are closed after 180 days of inactivity.

Making the background image stay in place

Products

Resources

Support