Sugarcube Stylesheets and Background Images

RecklessPrudence · June 2016

Hi, I was wondering if I could get some help?

I've got an assignment due in a few days, and almost everything is working (although I may very well break something between now and due date), but I cannot for the life of me get background images working. Or at least, not satisfactorily.

If I put the background image in the html section of the stylesheet, it works - but I want to be able to change the background image during the story, and for some reason nothing I do can get tagged html sections to work. On the other hand, I can get it to switch what it's showing if I put the image in the body section - but then it only shows the image for the horizontal slice of the page that has text, and leaves the rest of the page whatever colour I set in the base html section.

In other words:

html {
	background-image: url(Meander-Background-With-Side.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

sets an image I cannot change - it also leaves the image trailing off the bottom of the screen, losing the last bit, but that's a minor issue at the moment.

Whereas

.myth html {
	background-image: url(Meander-Background-With-Side.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

does nothing, nor does the same code with html.myth.

And if I use

body.myth {
	background-image: url(Meander-Background-With-Side.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

the result is the default SugarCube wherever I haven't already modified it, with a slice of my image, starting at the far left of the screen exactly high enough to catch the first piece of text, and extending far enough down to catch the last piece of text, but not showing the top of bottom of the image, just a slice from what would be the right place if the image was acting properly.

Any help would be greatly appreciated, and I hope I explained my problem sufficiently.

greyelf · June 2016

The body.myth CSS selector is correct one to use.

Three questions:
1. Which version of the SugarCube 1.x story format are you using?
2. What is the height/width of your image? (an example would be nice)
3. What is the height/width of your web-browser's view-port?

The reason I ask 2. & 3. is that the scaling done by the cover value can result in parts of the image being outside the view-port.

note: The image name in the url() function should be quoted.

background-image: url("Meander-Background-With-Side.png");
or
background-image: url('Meander-Background-With-Side.png');

RecklessPrudence · June 2016

Huh. Quoting the image name didn't seem to do anything different, but standards are standards.

1. SugarCube v1.0.35
2. 1870 x 944
3. 1920 x 944 - that might be my problem. I was working late last night when I made the images, I must have stuffed up somewhere and it's scaling so the 1870 becomes 1920, which of course makes the 944 too big.

An example of what happens when I use body.myth to insert the image is attached, as well as the version of Meander-Background-With-Side that has been corrected to 1920 wide (which was also what was used in the example).

greyelf · June 2016

RecklessPrudence wrote: »

1. SugarCube v1.0.35

Your example image was created using SugarCube 2, which has the stow-able side-bar.

So if you are using SC2 then your CSS is doing have to change a number of the defaults for the background image to cover the whole view-port. I would start with something like the following:

html, body {
	height: 100%;
}
#story {
	margin: 0;
	padding: 2.5em 2.5em 2.5em 0;
}
#ui-bar.stowed~#story {
	margin-left: 0;
}

body.myth {
	background-image: url('Meander-Background-With-Side.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

... you are going to have an issue with visual issue with the large orange area on the left side when people stow the side-bar.

I also tested your background image using SC1 and once I made my view-port big enough to see the whole patterned boarder I only had two issues:

1. the SC1's default side-bar only covered 2/3 - 3/4 of the orange area on the left side.
2. I had to move the left-hand side of the passage text area over a little.

body {
	margin-left: 32em;
}

body.myth {
	background-image: url('Meander-Background-With-Side.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

RecklessPrudence · June 2016

Sorry, thought I had downloaded SugarCube 1. Now I feel embarrassed!

To fix the problem of the massive blank space when the user stows the sidebar, is it possible to load a different image when the sidebar is stowed? With Classes or something? My original implementation was actually a border-image with a .svg, but I couldn't quite get that working. I've solved all the old problems with it, but would like to be able to alter the settings on the border-image when the user stows the sidebar.

Thanks for all the help so far!

EDIT: The code for my border-image:

body.myth {
	color: #000000;
	background-color: #cc6600;	border-style: solid;
	border-width: 36px 36px 36px 320px;
	-moz-border-image: url(Meander-Composite-With-Side.svg) 36 36 36 320 round;
	-webkit-border-image: url(Meander-Composite-With-Side.svg) 36 36 36 320 round;
	-o-border-image: url(Meander-Composite-With-Side.svg) 36 36 36 320 round;
	border-image: url(Meander-Composite-With-Side.svg) 36 36 36 320 round;

And what I would want to do is, when the sidebar is stowed, switch to a different .svg and alter the left border-width and border-image-slice properties.

greyelf · June 2016

The stowed side-bar CSS selector you will need is:

body.myth #ui-bar.stowed~#story { ... }

I played around with a version of your image without the left side and the best I could do was:

html, body {
	height: 100%;
}
body.myth #story {
	min-height: 100%;
	background-image: url('Meander-Background.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin: 0;
	border-left: 17.5em solid transparent;
	transition: border-left .2s ease-in;
}
body.myth #ui-bar.stowed~#story {
	margin-left: 0;
	border-left: 2em solid transparent;
}
body.myth #passages {
	padding: 2.5em 0;
}

... which has the image on the #story element instead and handles the stowing/unstowing of the SC side-bar (including transition) but it has two major faults:

1. It scrolls with the scroll bar if the passage text is larger than the visible view-port, I had to remove background-attachment: fixed; because it causes parts of the image not to shown within borders or margins.

2. The top and bottom padding becomes to small as the image scales up to fit larger view-ports.

I think you need a CSS coder with more experience than me. lol

RecklessPrudence · June 2016

Okay, thanks for all the help. I might just have to not have it change when the sidebar is hidden and hope my examiners don't notice. None of this was, strictly speaking, necessary - I was just trying to do something cool and hopefully make up for an assignment I tanked earlier in the semester.

Claretta · June 2016

I seem to remember getting changing html images to work at one point. Pretty sure I used a combination of defining the CSS transitions in the html layer and then using sugarcuge's <<addclass>> and <<removeclass>> macros to do it.

eg

html.image1 {
stuff;
transition: all 3s;
}

html.image2 {
stuff;
transition: all 3s;
}

<<addclass "html" "image1">>

<<removeclass "html" "image1">>

<<addclass "html" "image2">>

You need to use the remove class macro before each further change because you can only have one html layer at any one time.

Months since I did that, though.

However, shoving everything into the html or body sections is a little awkward. The best way to do this is to store images on many different divs at different z-index levels. That way you can define the dimensions of your own layers instead of forcing them into native sugarcube dimensions. This is how my game achieves its layering effects:

You can create these divs in javascript (don't know how off the top of my head) or just insert them straight into the HTML source like so:

<body>
	<div id="init-screen">
		<p id="init-no-js"><noscript>Apologies! JavaScript is required. Please enable it to continue.</noscript></p>
		<p id="init-lacking">Apologies! Your web browser lacks required capabilities. Please consider upgrading it or switching to a more modern web browser.</p>
		<p id="init-loading">Initializing sound. Please wait&hellip;<br /><progress></progress></p>
	</div>
	<div id="top" class="top"></div>

With some native SugarCube html to show where you put it. The Custom div is the "top".

When you want to access them you can use sugarcube's <<addclass>> and <<removeclass>> macros. Though I use GreenSock animation to activate all my divs, since it's way less messy than inline macros and you don't need to use the <<timedreplace>> addon to do it.

Eg.

TweenLite.set(barracks, {className:"barracksintro"});
TweenLite.set(barracks, {delay:5.1, className:"-=barracksintro"});

Is what activates the agent with rocket launcher in the video above.

Been a while since I checked Twine 2, but afaik all this is easier using Twine 1.4.1 tbh. Way easier to edit source HTML and insert greensock code.

RecklessPrudence · June 2016

Hm. Damn. So, it all worked, or at least all that I could get working - until I imported the images into the story file. Now, where the images were, it only shows the default background colour - pitch black. Where I had a light background image and black text is the worst problem, but elsewhere I've got these ugly huge black borders.

Any ideas? The code I'm using to use the images all looks like this:

background-image: [img['Page-Background-With-Side.png']];

It used to look like this instead:

background-image: url(Page-Background-With-Side.png);

But that stopped working when I imported the images. I was hoping the alteration would fix it, but no.

Oh, and most of them aren't .pngs, they're .svgs instead - which the Twine wiki says are supported, but that they won't show in the storymap. They more than don't show, they outright throw errors. Is that okay?

greyelf · June 2016

Your CSS property should look like the following if you are trying to reference an embedded image (imported image):

background-image: [img[Page-Background-With-Side]];

... notice the lack of quotes and file extension, this is because it is the name of the Passage that was created when you embedded/imported the image.

warning: If you are planing to use more than 50MB's (total) of images in your story then it is generally suggested that you use externally stored files because the Twine 1 application will start having "Out of Memory" errors during the building process once the total size of your Story Project (include child TWS files) reaches somewhere between 50-100MB.

Claretta · June 2016

To save space you should convert all images into jpg with an export quality of about 60 in GIMP or Photoshop and then you can compress further using the program "JPEG Mini" http://www.jpegmini.com/. You can even use 100 quality images compressed with Jpeg mini if they're not too complex (eg solid background colours with some details).

Howdy, Stranger!

Categories

Sugarcube Stylesheets and Background Images

Comments