Howdy, Stranger!

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

Getting rid of the passage background

I'm using Twine 2 with SugarCube 1.0.34. I can place a background image to each of my passages, however every time i add some text it places the image inside of that too. I've used the 'inspect' to find the bit i need to alter (<section id="passage-space" class="passage space" data-passage="Space" style="visibility: visible;") but i just cannot seem to get rid of it when i write my css code for it. Any help from you peeps out there would be a great help. Thanks

Comments

  • What CSS did you use?

    I'm not really sure what you're wanting to do, but did you try:
    #passage-space {display: none;}
    
  • You're going to need to describe what you're attempting to accomplish in greater detail and show the CSS you're using before we can offer any kind of informed suggestions.
  • Sorry guys! Jud_casper that's the css i tried to use but didn't work. TheMadExile i will screen shot what i mean. The one with the highlighted code is what i am after. I can change it in the inspect hmtl but cannot see where i am going wrong when i code.
    Thanks
  • Please also post the CSS that you added to your story to get the background image to appear.
  • Hi Guys sorry for not replying I was away with the school. Here's the css I used -
    body {
    font-size: 16px;
    }

    .space {
    background-image: url("Space-Wallpapers.jpg");
    }

    #passage: {
    display:none;
    }
  • @nigsrasta: Your space Passage Tag is being added as a CSS class name to both the body element and the passage element, this is why your .space CSS selector is being applied to both of those elements.

    To fix your issue you just need to make your .space selector more specific like so:
    body.space {
    background-image: url("Space-Wallpapers.jpg");
    }
    
  • @greyelf you are star! Tanks for that.
  • Also, the following is invalid and should be removed:
    #passage: {
    	display:none;
    }
    
    There is no element with the ID passage and you have a spurious colon at the end of the selector. The non-existent ID, while incorrect, should not cause additional issues. The spurious colon, OTOH, is a syntax error and could cause further CSS to be ignored.
  • Cheers for all your help guys. Next stop to find out how to create a inventory on how to pick up, use, drop and increase/decrease health! These kids are so demanding!
Sign In or Register to comment.