Howdy, Stranger!

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

Image background vs regular ol' image insert

How do I make:
<img src= "c:\users\dideditor\desktop\background.jpg">

Into a permanent background for my game??? If I add the above to my CSS I get a big fail and I've messed around for an hour now...

Comments

  • The local file URL you used in your example will not be viewable by other people, if you wish to use locally stored image files then do the following.

    a. Create a new folder on your hard-drive.

    b. Store all your image files in this new folder.

    c. Remove the path from the filename in all your img elements.

    eg. Change <img src= "c:\users\dideditor\desktop\background.jpg">
    to be <img src= "background.jpg">

    d. Use the Publish to File option to create a Story HTML file and save it within the new folder.

    e. Run the Story HTML file in your web-browser and you will see your images.

    RE: permanent background
    Place the following CSS in your Story Stylesheet area..
    html. {
    	background-image: url('background.jpg');
    }
    
    If you don't know where to find your Story Stylesheet or area then I suggest you read the Adding Custom Javascript and CSS section of the Twine 2 Guide.
  • It didn't work!

    Adding the image worked by placing the image file and the published HTML file into the same folder i.e.
    <img src= "background.jpg">
    
    is just fine.

    But it did not show the image as a background. This is the top of my CSS:
    <head>
    
    /* basic elements */
    html {
    	margin: 0;
    	padding: 0;
    }
    
    html. {
    	background-image: url('background.jpg');
    }
    
    body { 
    	font: 70% Georgia, sans-serif;
    	line-height: 1.88880;
    	color: 383936; 
    	background: #fff url(blossoms.jpg) no-repeat bottom right; 
    	margin: 0; 
    	padding: 0;
    	}
    

    Is something wrong here?
  • Sorry, my example incorrectly had a full stop in the CSS selector. Try the following:
    html {
    	background-image: url('background.jpg');
    }
    
  • Late but it should be
    background-image: url("background.jpg");
    
    replace ' with "
    But probably already figured out by now... just future reference for people googling.
  • edited April 2016
    jvemp wrote: »
    Late but it should be
    background-image: url("background.jpg");
    
    replace ' with "
    But probably already figured out by now... just future reference for people googling.
    That is absolutely incorrect. The URL may either be unquoted or quoted, by single or double quotes. IOW, there's nothing wrong with the of use single quotes there.

    The actual cause of the issue, a broken selector, has already been given by greyelf above (see: comment 15240). Accepted answers are moved to the top of the thread.

    If you're going to necropost, at least be correct.
  • edited April 2016
    Alternativly if your using Harlow in twine 2.0
    tw-story
    {
    padding: 50px 20px 50px 20px;
    background-image: url("tw_bg.png");
    }


    body
    {
    background-image: url("01.jpg");
    }



    pagebackgroundtest_zps2cpbg6mh.png

    Which is much the same as what greyelf has said but I have directly target the webpages background (body) and Harlows div's (tw-story ).
    This is put into the edit style sheet option.
    Remember that it will not actually work until you export to html and view in a browser.
  • edited June 2016
    Don't target html, target body.

    Also check your code as you are missing " " around the image file.
  • edited June 2016
    A problem is you're putting the background image in a html class. Try:
    html {
    	margin: 0;
    	padding: 0;
    	background-image: url('background.jpg');
    }
    

    If you want something to show up in the html as-is, has to be in the base html layer. Else you'd need to use javascript to add the blank class.

    Another problem is
    background: #fff url(blossoms.jpg) no-repeat bottom right; 
    

    in your body section. You can have a background in either the body or html, by not both, as they're layered on top of each other. Hence to show the html background you'd need to keep the body clear.

    In this code it appears you're trying to have a solid white background in the body.
Sign In or Register to comment.