Problem stylising on neocities when html files are sorted into folders

[taraellenrose]

Hihihi!!! I'm brand new to coding and I've been using neocities to host my site. I'm programming a blog site and I created a folder to put my blogs in to keep them organised but unfortunately I'm having issues with stylising them as a result, particularly adding the background image to my code/page. When everything was out on the dashboard it worked just fine, its just messed up in the folder, but I don't want to leave everything out on the dash bc its soooo messy. I've tried to create another file for the image in the folder aswell but that doesn't make any odds. Tbh i just copied the code from a youtube video so I'm not sure what it actually does. I'm brand new to html and I don't know any css. I'll copy the code below but it works fine with putting a background pic in index.html i think it is just a problem with the folders??? lmk if you've had this issue and any advice and help would be much appreciated

<style>
  body{
    background-image: url(blogs/wallpaper.jpeg);
  }
</style>

also!!

<style>
  body{
    background-image: <img src="blogs/wallpaper.jpeg"/>;
</style>

doesn't work either but as I said the first code works fine outside of the folder. so idk

[sweetwana]

Hi hiiii

I am also very much a beginner at this, but I took a look at my code in my stylesheet and noticed that I have a forward slash before the first folder name. I have something in the back of my head that makes me think it didn’t work before I added it?

But I might be wrong!

So mine is like…

background-image: url('/images/grassybackground.jpg');

(I am so sorry if this is a red herring, and also I love the castle in your picture!)

[gh0ulixh]

I am also very much a beginner at this, but I took a look at my code in my stylesheet and noticed that I have a forward slash before the first folder name. I have something in the back of my head that makes me think it didn’t work before I added it?

background-image: url('/images/grassybackground.jpg');

(I am so sorry if this is a red herring, and also I love the castle in your picture!)

i'm new to coding myself, but in my experience, like sweetwana said, the inclusion of the starting forward slash (/) is how to get the code to recognize the path to the image you're referencing properly   

[taraellenrose]

thanks for the advice!! I'll give it a shot and let you know if it works :)) also the castle is in my hometown, i'm very lucky to live in such a cool place :D

[taraellenrose]

eeeeee thank you both so much it worked like a dream!!! :DDD

[sweetwana]

Ooh, fellow castle-hometown-haver!

Glad I was able to help! Wahoo! I enjoyed reading your blog posts. I don’t know you, but it felt like hearing from a friend 

[IndigoGolem]

I'd like to elaborate on this. There are basically three ways to specify a file path (the path to a file): relative and absolute. I don't know if those are the formal computer words for this.

If you want one document to link to something in the same folder (another page, an image, a stylesheet, etc.), you can just have its name within href or src. <a href="example.html">[/url], or <img src="picture.png">

If you want to link to something in a different folder, how you do that depends on where it is. If it's in a subfolder within the current folder, you use that subfolder's name. <img src="assets/picture.png">. If it's in a folder higher up, you can use two dots and a slash to say "go up a level". <a href="../index.html">[/url]. If it's in another subfolder of a higher folder, you can combine these path structures. <link rel="stylesheet" href="../style/main.css">

The other main way to do this is to always define your file paths relative to the main folder for your site. This is done by starting it with a slash, so <a href="/index.html">[/url] will always lead to your site's main index page no matter what folder the page you're coming from is in.

Writing links this way, the main index is always "/index.html" or even just "/" (i think), rather than sometimes being "index.html" or "../index.html" or "../../index.html", or however many more levels if you really love nesting folders.

You can also specify your site's address, <a href="example.neocities.org/blog/example.html">[/url], which means always typing out the longest form of the file path. I don't know a good reason to do this unless you're linking something on another site or another domain.