Howdy, Stranger!

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

Background Images: Scale & Positioning.

edited March 2016 in Help! with 1.x
Hi all, I'm working on a very image heavy Twine at the moment, with the central idea being that you can walk to an environment frame by frame in a style similar to the original version of Myst.

I figured the best way to do this would be to make all my environment images backgrounds and then add any text and buttons over the top of this, but I'm having trouble getting my images to the correct position.

There are two problems, one is just the matter of what size to make the image so that it fills the screen without being excessively huge, and the other is how to centre it.

Ideally I'd be able to centre an image slightly bigger than the screen (basically giving it a "bleed"), but at the moment it aligns left.

current stylesheet looks like this:

body {
margin: 2%;
text-align: center;
background: [img[church1]];
}

EDIT: (tried adding a background-position: center; which...helps, it's now aligned to the centre left to right but not top to bottom, any way to do that?)

Any help appreciated!

Comments

  • For one thing the css is
    background-image: url("tw_bg.png");
    
    What style are you using?
    In harlow I set my image to tw-story because I wanted a page effect.
    What browser you viewing on?
    also it is
    align:center;
    
    not
    text-align:center;
    

    Also adding
    max-width: 99%;
    height: auto;
    
    Is a little trick for auto scaling images for devices with smaller screens.
  • procrasty wrote:
    background: [img[church1]];
    
    For one thing the css is
    background-image: url("tw_bg.png");
    
    The background CSS used by procrasty is actually correct.

    Twine 1 supports embedding images within a story project, the embedded image is encoded as base64 data which is stored within a passage. These passages can be referenced via a [img[passage-title]] macro call, and these macro calls can be used within CSS.

    @procrasty:
    You need to state which Story Format you are using when you ask a question, as answers can be different for each one.
  • greyelf wrote: »
    procrasty wrote:
    background: [img[church1]];
    
    For one thing the css is
    background-image: url("tw_bg.png");
    
    The background CSS used by procrasty is actually correct.

    Twine 1 supports embedding images within a story project, the embedded image is encoded as base64 data which is stored within a passage. These passages can be referenced via a [img[passage-title]] macro call, and these macro calls can be used within CSS.

    @procrasty:
    You need to state which Story Format you are using when you ask a question, as answers can be different for each one.

    Ah, I'm running 2.0.11 with images set via style sheets and not called in the text however I have only read that the image is a seperate file in the same location and must be called with the extension.
  • @greyelf I'm using Sugarcane for this (sorry, should have specified that), although if changing the story format is needed to get it to work the way I'm wanting I'm in the early stages so I'm not married to that.
  • procrasty wrote: »
    I'm using Sugarcane for this
    While it should be possible to achieve what you want using Sugarcane I would strongly suggest changing to SugarCube 1 or SugarCube 2.

    The main reason I suggest this is that Sugarcane was last released in 2014 and it contains a number of bugs, some of which have been fixed but not made generally available to Authors.
    Where as SugarCube 1 is still being actively maintained and SugarCube 2 is still being actively developed.

    I am a little short on time atm but I suggest you look at the following CSS properties:

    a. background-repeat: no-repeat; so the image is only shown once.

    b. background-position: center center; to centre both horizontally and vertically.
    note: by default the story/passage will set the current height to be the minimum required to fit whatever is being shown, you may need to do something like height: 100%; to force it to always fill the web-browser entire viewable area.

    c. background-size: 100% 100%; to scale the image.
    note: Image can loose detail when scaled, this is one reason some people use media at-rules and different sized versions of the same image instead.
  • Thanks @greyelf ! I'm still experiencing some issues, possibly because I'm in sugarcane (sugarcube 2 refuses to acknowledge my stylesheet, do I need to do something to tell it to override the default one?) but I've definitely made some headway.

    I think I just need to have a fiddle about with the size and proportions of my image now.

    Much appreciation for taking the time to look at this. :)
  • procrasty wrote: »
    I'm still experiencing some issues, possibly because I'm in sugarcane (sugarcube 2 refuses to acknowledge my stylesheet, do I need to do something to tell it to override the default one?)
    Some of the core CSS selectors are named differently in SugarCube, so I would need to see your CSS to know which need to be changed.

  • body {
      margin: 2%;
      text-align: center;
      background: [img[church1 copy]];
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      max-width: 99%;
      height: auto;
    }
    #passages{
      margin: 0;
      padding: 0;
      border: 0;
      width:96%;
      margin: auto;
    }
    .passage {
      font-size:6em; 
      text-align: center;
      font-family: "Times New Roman",serif;
      color: #D8D8D8;
      text-shadow: #D8D8D8 0 0 0.05em;
    }
    @media screen and (max-width: 960px) {
      .passage {
        font-size: 4em;
      }
    }
    @media screen and (max-width: 640px) {
      .passage {
        font-size: 3em;
      }
    }
    a.internalLink, a.externalLink {
      color: #D8D8D8;
      text-shadow: #D8D8D8 0 0 0.07em;
    }
    a.internalLink:hover, a.externalLink:hover {
      color: #D8D8D8;
      text-decoration: none;
      text-shadow: #D8D8D8 0 0 0.09em;
    }
    #sidebar {
    	display:none;
    }
    

    Probably a little on the ugly side at the moment as I'm modifying someone else's stylesheet so there may be some unnecessary leftovers.
  • It's entirely possible (nee. likely) there's a much easier way to achieve what I want, I do keep getting some pages where the whole thing works perfectly but I can't work out what's triggering it to do so...pfft.
  • The following should achieve what you want, but you may want to get a more experienced CSS coder to have a look at it in case there are any incompatibilities.
    body {
    	background: [img[church1 copy]];
    	background-position: center center;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size: cover;
    }
    #ui-bar {
    	background-color: transparent;
    }
    #passages {
    	width: 96%;
    	max-width: none;
    	margin: auto;
    }
    .passage {
    	font-family: "Times New Roman",serif;
    	font-size: 6em; 
    	text-align: center;
    	color: #D8D8D8;
    	text-shadow: #D8D8D8 0 0 0.05em;
    }
    a.link-internal, a.link-external {
    	text-decoration: none;
    	color: #D8D8D8;
    	text-shadow: #D8D8D8 0 0 0.07em;
    }
    a.link-internal:hover, a.link-external:hover {
    	text-shadow: #D8D8D8 0 0 0.09em;
    }
    
    @media screen and (max-width: 960px) {
    	.passage {
    		font-size: 4em;
    	}
    }
    @media screen and (max-width: 640px) {
    	.passage {
    		font-size: 3em;
    	}
    }
    
    ... as you can see I made a couple of changes to your example:

    a. I forgot to mention the background-attachment property my earlier comment, it is required to force the image to cover the whole screen even during scrolling. You may want to read Responsive Full Background Image Using CSS if your interested in how it all works.

    b. SC2's #passages element has a default max-width of 54em, which was overriding your width: 96%;

    c. SC2's equivalent of the internalLink and externalLink classes are link-internal and link-external respectively.

    d. Hiding the side-bar. (SC2 sidebar's ID is #ui-bar, instead of #sidebar)
    You could hide SC2's sidebar the same way as you did with Sugarcane but I would advise against this because doing so would stop the Reader from being able to save their progress, and more importantly it would stop them from being able to access the Undo/Redo buttons at the top of the sidebar. (SC2 does not use the web-browser's History buttons)

    SC2's sidebar has the ability to be stowed (minimized) by the Reader thus freeing up screen space. By default the sidebar appear in it's maximized state but you can control this by adding using the config.ui.stowBarInitially setting in your story's script tagged passage. Use the following if you want the sidebar to start minimized:
    config.ui.stowBarInitially = true;
    
Sign In or Register to comment.