Howdy, Stranger!

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

Background images: css vs html tag

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:
body {
	background-image: url(filepath\file-name.jpg)
}

This does work:
<img src="filepath\file-name.jpg">

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?

Comments

  • edited July 2016
    There are three potential issues with your two examples:

    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.
    body {
    	background-image: url("filepath/file-name.jpg");
    }
    
    <img src="filepath/file-name.jpg">
    
    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.
  • oh my god thank you.
    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?
  • edited July 2016
    You're using the wrong path separator. URIs use the forward slash (/), not the backslash (\). Your style rule should look something like the following:
    body {
    	background-image: url("filepath/file-name.jpg");
    }
    

    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.
  • You're using the wrong path separator. URIs use the forward slash (/), not the backslash (\). Your style rule should look something like the following:
    body {
    	background-image: url("filepath/file-name.jpg");
    }
    

    I'm guessing that the reason the backslash worked in the <img> tag's src attribute is because its 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.
    Cheers, mate.
  • 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?
    Within the url() functional notation, you may omit quotes if the resource string consists only of US-ASCII characters. If there are any extended characters within the string, then it must be quoted.

    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 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?
    Within the url() functional notation, you may omit quotes if the resource string consists only of US-ASCII characters. If there are any extended characters within the string, then it must be quoted.

    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.
Sign In or Register to comment.