Howdy, Stranger!

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

Image not being grabbed from CSS

edited November 2016 in Help! with 2.0
Sugarcube 2.11.0

This is a kind of continuation of my other thread, but for clarity I'm giving it its own thread.

I have a passage named begin, and in that passage I have given it the tag intro. I've then set a five second timer on it.

In my CSS I'm calling that passage with body.intro and setting a title image thusly:
body.intro #ui-bar-body { background-image: url(splash.jpg) no-repeat; width: 500px; margin: 350px 0 0 350px; }
But when I publish and run the game in my browser, the image doesn't show (just a blank page on a timer)

Any ideas??

Comments

  • There's only one <body> tag in a web page -- the one that contains everything else visible. Your passage is a <div> element, as per this page: http://www.motoslave.net/sugarcube/2/docs/html.html, so that's what you want to select.
  • Jud_Casper wrote: »
    I've then set a five second timer on it.
    A timer on what exactly and what is it doing? You need to show the code for things like this. Saying something like, "I've done stuff", tell us nothing about what the "stuff" actually is, nor does it tell us if you're doing the "stuff" correctly.

    Jud_Casper wrote: »
    In my CSS I'm calling that passage with body.intro and setting a title image thusly:
    body.intro #ui-bar-body { background-image: url(splash.jpg) no-repeat; width: 500px; margin: 350px 0 0 350px; }
    
    But when I publish and run the game in my browser, the image doesn't show (just a blank page on a timer)
    Beyond the issue I raised in my reply in your original thread—why are you screwing with the UI bar in the first place—the value you've given to the background-image property is invalid. The background-image property only accepts a list of images to use for the background, so specifying no-repeat is invalid. You either needed to use the background shorthand property or use the background-repeat property. For example:
    /* WRONG. */
    background-image: url(splash.jpg) no-repeat;
    
    /* GOOD. */
    background: url(splash.jpg) no-repeat;
    
    /* ALSO GOOD. */
    background-image: url(splash.jpg);
    background-repeat: no-repeat;
    


    felixp7 wrote: »
    There's only one <body> tag in a web page -- the one that contains everything else visible. Your passage is a <div> element, as per this page: http://www.motoslave.net/sugarcube/2/docs/html.html, so that's what you want to select.
    You seem to have misunderstood what's going on. For any navigated passage, SugarCube attaches the passage's tags to the document body as classes—see: CSS > General Notes for details. Ergo, in this case body.intro is simply acting as a filter for the rest of the selector.
  • edited November 2016
    Thanks for the replies, both. Please see here where I'll cover it all.

    I can see here that nothing I've said was very clear, so apologies for that. My head was still full of the other thread and I wrongly assumed all this would make sense to others too.

    http://twinery.org/forum/discussion/7910/intro-screen#latest
Sign In or Register to comment.