Code to add local image to background

Question

I see lots of information about adding background images from websites. Is there code for the CSS Stylesheet that will allow background images stored on a local hard drive?

Answer 1

This thread may help you out.

To copy and re-explain the relevant part, the key bit of CSS you'll be looking for is thus:

background: url(../images/image.png) no-repeat center;

That assumes the following file/folder structure, folders marked with square brackets:

• [html]
  • twinestory.html
• [images]
  • image.png

So, the ../ tells the path to go "back one", starting from the file location it's triggered from - in this case, the story's html. so it goes BACK one level, then goes INTO the images folder (images/) and then selects image.png from that folder's contents. If you wanted to refer to say, a music file in some other scenario, the path would work thusly.

url(../music/musicloop.mp3)

And assumes the following folder structure:

• [html]
  • twinestory.html
• [images]
  • image.png
• [music]
  • musicloop.mp3

 

- EDIT -

I might note that if all your project files were in the same folder location, you shouldn't need the .../foldername/ part. But I would encourage you as part of good project management practice to sort files into appropriate folders!

Comments

In the above folder structure there is no real need to place the twinestory.html file within its own folder (the html folder), as this just makes the relative URLs more complex than they need to be.

Simply place the twinestory.html file within the folder that contains both the images and music folders so your structure looks like so:

• twinestory.html
• [images]
  • image.png
• [music]
  • musicloop.mp3

... then change your relative URLs to look like the following:

background: url(images/image.png) no-repeat center;

<audio src="music/musicloop.mp3" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

 

---

Good point! I think stepping up a folder level is still good to know about, but you're right, for a twine story there's really not as much need to have the html in its own folder. I guess I'm carrying across some file management habits from other areas!

TL;DR Either approach will work, but greyelf's IS more efficient and cleaner.