Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How do I get rid of the bg block/change opacity?

Hello!
This seems like it shouldn't be too difficult, but I can't find the answer anywhere. The default for Sugarcube is a black box with white text. I'd like to be able to do both of these things:

: get rid of the black box so I can just make it black text against a light bg image (I know how to put in the bg image)

and

: change the opacity of the box

Thanks!

Comments

  • You should always state the story format you're using and its full version, because advice will tend to vary based on that information.


    Box? Are you referring to the UI bar or…? Please be specific.
  • Hi, sorry, I downloaded Twine 2.1.1 and I'm using the Sugarcube format.

    I'm not sure what the box is called...
    Here, I took a screenshot of my project and attached it. There's the text that says "After the Giant's War" etc. and I'm talking about the black box surrounding it.
  • Which version of SugarCube? It's not the factory default, so you must have manually selected it at some point. Check which one you selected, it will include a version.

    Anyway. I'm going to assume you're using custom CSS. Without knowing what your markup and styles look like, we can't really tell you how to fix it.
  • Sugarcube 1.0.34

    The only thing I have in the css is the bg image:

    html {
    background: [img[images/bg.png]] fixed;
    background-size: cover;
    }
  • Please, use the code tag when posting code or markup—it's C on the editor bar.

    Hi, sorry, I downloaded Twine 2.1.1 and I'm using the Sugarcube format.
    Sugarcube 1.0.34
    Those two things do not match. Twine 2.1.1 includes SugarCube v1.0.35 and SugarCube v2.14.0. Thus, I can only assume that you're actually using Twine 2.0.11, which only includes includes SugarCube v1.0.34 and was the last Twine 2 version to do so.

    Beyond that. SugarCube v1 has been superseded by SugarCube v2 and will only receive bug fixes from now on, so I'd really suggest switching to v2 if possible.


    Regardless. For SugarCube v1, change your style to one of the following.

    Background on <body>:
    body {
    	background: [img[images/bg.png]] fixed;
    	background-size: cover;
    }
    

    Background on <html>:
    html {
    	background: [img[images/bg.png]] fixed;
    	background-size: cover;
    }
    body {
    	background: transparent;
    }
    


    PS: With what you're doing here, there's not much point in using the background-size property if you're also using the background shorthand property. Simply do everything you need with the shorthand property. For example, the following:
    	background: [img[images/bg.png]] fixed;
    	background-size: cover;
    
    May be written as:
    	background: [img[images/bg.png]] 0 0/cover fixed;
    
Sign In or Register to comment.