I am trying to set a background image for all passages in place of the default black but I can't seem to get the css to work. Only html <img> tags show my intended image and the dimensions still don't come out the way I want.
This doesn't work:
This does work:
I've used absolute and relative paths, both locally and online and I still can't get the image to show using css. Is there something I'm doing wrong or is there something in sugarcube(1.0.34) that would cause one option to work over the other?
1. Because of the different ways operating systems handle directory/folder structure pathing, you should always use a forward slash instead of a backslash in URLs.
2. A CSS property assignment should always end in a semi-colon.
3. It is good practise to wrap the parameter of a url() call in quotes.
Changing your two examples to the following should work as long as the path of the relative referenced image is correct. NOTE: By default the vertical height of the body element is automatically calculated to be the minimum necessary to display the contents of the current passage, this means that any background image displayed using CSS may only show part of the image. You may also need to assign a value to one or more of the background or height related CSS properties.
I've been staring at this for hours trying to figure out why one would work but not the other. The backslashes were the issue. I figured since they were already used in the path name that it would have worked. I didn't know I would have had to change them to forward slashes.
I had a follow-up question for curiosities sake. I read somewhere that using quotes wasn't entirely necessary. Is that true or it just a case of - it's better to have them than not?
I'm guessing that the reason the backslash worked in the <img> tag's src attribute is because it's simply treated as a string—and the browser corrected the backshash into a forwardslash for you.
The reason it did not work in your style rule is because the CSS syntax allows character escapes, which start with the backslash. Meaning, the \f in filepath\file-name.jpg was mistaken as a character escape.
Thanks a lot TME that clears things up quite a bit.
Personally, I find that it's better to use them if for no other reason than consistency. If you always quote the resource string, you will not often have to worry about the characters it contains.
I definitely will follow that practice from now on, thanks a lot.