›

Howdy, Stranger!

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

Sign In Register

Categories

Can You Change The Background Image?

DeadshotDeadshot
in Help! with 2.0
I am using Harlowe, and I'm wondering if you can import (or something) an image into your story and make it a background image. I know you can change the background to different colours, but I recently played 'The Uncle From Nintendo', where the background is an image instead of just a colour. I don't know which format they're using, but I would quite like to do this in the game that I'm working on. I have an image address, by the way:

https://pixabay.com/en/palmetto-bay-beach-roatan-1505474/

Thanks

Comments

  • greyelfgreyelf
    If you search the forum for background you will find a number of topics/comments about using CSS to show a background image.

    In your particular case the CSS would look something like:
    body {
    background-image: url("https://pixabay.com/static/uploads/photo/2016/07/08/23/45/palmetto-bay-beach-1505474_960_720.jpg";);
    }
    note: Everything between the { and the } is on one line, the forum software is causing it to be split over multiple lines.
  • DeadshotDeadshot
    greyelf wrote: »
    If you search the forum for background you will find a number of topics/comments about using CSS to show a background image.

    In your particular case the CSS would look something like:
    body {
    background-image: url("https://pixabay.com/static/uploads/photo/2016/07/08/23/45/palmetto-bay-beach-1505474_960_720.jpg";);
    }
    note: Everything between the { and the } is on one line, the forum software is causing it to be split over multiple lines.

    Thanks.!
  • DeadshotDeadshot
    edited August 2016
    Deadshot wrote: »
    greyelf wrote: »
    If you search the forum for background you will find a number of topics/comments about using CSS to show a background image.

    In your particular case the CSS would look something like:
    body {
    background-image: url("https://pixabay.com/static/uploads/photo/2016/07/08/23/45/palmetto-bay-beach-1505474_960_720.jpg";);
    }
    note: Everything between the { and the } is on one line, the forum software is causing it to be split over multiple lines.

    Wait, for some reason this didn't change the background image. This may be because the url goes on two lines, but that is because I just copied and pasted what you wrote. If this is the reason, how would I make it on one line. And if not, do you know why it might not be working? Should I try putting html instead of body? Or maybe I put it somewhere specific on the Stylesheet. I have a lot of other stuff in there, and I just put what you put and the bottom of it.

  • greyelfgreyelf
    I placed a note at the end of my original post explaining that the forum software was causing the URL to appear on more than a single line.

    Simply remove the extra line-breaks so that what you pasted shows the background-image property and it's URL on one line.
  • DeadshotDeadshot
    How do I remove the extra line breaks?
  • DeadshotDeadshot
    edited August 2016
    I'm really confused. I've tried this:
    body {background-image: url("https://pixabay.com/static/uploads/photo/2016/07/08/23/45/palmetto-bay-beach-1505474_960_720.jpg";);}

    But is this not what you mean? Do you mean to get the image address all onto one line, because I don't think I can - it's too big.

    note: I don't know how to stop this smiley face from coming up. It's actually just a close bracket.
  • greyelfgreyelf
    The smiley face is caused by a bug in the forum software, which is why I use a quote tag instead of a code tag.

    That is basically what I meant, you could put the body { part and the final } on different lines but the rest needs to be on the same line.
  • ConerConer
    I think the image doesn't work because the website has blocked hotlinking. I tried the same code but changed the url and it worked fine.
    body {background-image: url(http://i.imgur.com/LovfAOJ.jpg);}
  • DeadshotDeadshot
    For some reason this just made my background go blue.

    In what way did you change the URL?
  • DeadshotDeadshot
    greyelf wrote: »
    The smiley face is caused by a bug in the forum software, which is why I use a quote tag instead of a code tag.

    That is basically what I meant, you could put the body { part and the final } on different lines but the rest needs to be on the same line.
    greyelf wrote: »
    The smiley face is caused by a bug in the forum software, which is why I use a quote tag instead of a code tag.

    That is basically what I meant, you could put the body { part and the final } on different lines but the rest needs to be on the same line.

    I am trying to use this as my background image, but instead of it being one image, it's loads of small ones of them. Can I change their size, or is it just the image, or what?

    https://lh3.googleusercontent.com/JB76vc5LLEKWEF1Lt6GMgx3zbcHE5isBRXYdUHsQE6bzq1ZAfoy703A5R_iEVS8IQG5h7w=s147
  • greyelfgreyelf
    When you set a background (colour or image) on an element (like html) the web-browser assumes by default that you want to fill the whole area of that element with the background. and because your image is so small (only 147x85) this results in it appearing many times both horizontally and vertically.

    You can control the way the repeating/tiling is done using a CSS background-repeat property, so to stop the repeating totally you could change the CSS in my original example to something like the following: 
    body {
	background-image: url("insert the url to your image here");
	background-repeat: no-repeat;
}
    I am guessing that your next question will be "How do I scale the image so that it covers the whole of the background" and my answer will be "You don't, the image is too small and it will become extremely grainy/pixelated if you try. Get a bigger image."
  • DeadshotDeadshot
    Thank you!
  • DeadshotDeadshot
    greyelf wrote: »
    When you set a background (colour or image) on an element (like html) the web-browser assumes by default that you want to fill the whole area of that element with the background. and because your image is so small (only 147x85) this results in it appearing many times both horizontally and vertically.

    You can control the way the repeating/tiling is done using a CSS background-repeat property, so to stop the repeating totally you could change the CSS in my original example to something like the following: 
    body {
	background-image: url("insert the url to your image here");
	background-repeat: no-repeat;
}
    I am guessing that your next question will be "How do I scale the image so that it covers the whole of the background" and my answer will be "You don't, the image is too small and it will become extremely grainy/pixelated if you try. Get a bigger image."

    This doesn't work. I've copied exactly what you've written, and pasted my URL in between the double quotes, but it doesn't do anything to the background.
  • DeadshotDeadshot
    Deadshot wrote: »
    greyelf wrote: »
    When you set a background (colour or image) on an element (like html) the web-browser assumes by default that you want to fill the whole area of that element with the background. and because your image is so small (only 147x85) this results in it appearing many times both horizontally and vertically.

    You can control the way the repeating/tiling is done using a CSS background-repeat property, so to stop the repeating totally you could change the CSS in my original example to something like the following: 
    body {
	background-image: url("insert the url to your image here");
	background-repeat: no-repeat;
}
    I am guessing that your next question will be "How do I scale the image so that it covers the whole of the background" and my answer will be "You don't, the image is too small and it will become extremely grainy/pixelated if you try. Get a bigger image."

    This doesn't work. I've copied exactly what you've written, and pasted my URL in between the double quotes, but it doesn't do anything to the background.

    Oh, actually, it works. Sorry and thanks! That helps so much!!! :smile: :smile: :smile:
Sign In or Register to comment.