Background image does not show up

Question

I've tried the answers on 4 other S.O. questions but my image is still not showing up. I'm learning to code by going through Dash at General Assembly. However I'm building this project using Sublime 3.

body{

    background-image: url("Southern California Sunset.jpg");

My html file and images are saved in the same folder.

Where I obtained the background image:

Southern California Sunset.jpg

Answer 1

You must have a picture size under 1 MB or 500 KB. This worked.

body { 
  background-image: url(yourfile.jpeg);
}

Answer 2

Your CSS syntax for background image is correct:

background-image: url("Southern California Sunset.jpg");

You can replace each space with %20 which is the HTML URL encoding equivalent. But in a modern web browser this may not be necessary. You can also use camel case (that is, capitalization of the first letter of every word) without spaces or another naming convention to eliminate the spaces.

As long as the syntax is correct and the file is in the right place, the code should work properly.

You do, however, have a small (unrelated) syntax error in your code; this:

<input type="email"; placeholder"Your email"/>

should be:

<input type="email" placeholder"Your email" />

HTML is generally pretty forgiving of syntax errors. Still, it is best to avoid them.

Answer 3

Like he said you should avoid using spaces when saving an image. I use the 'camel humps' method for all my coding. So instead of using spaces you capitalize the all the words. So instead of 'my example image text.jpg', it would be MyExampleImageText.jpg.

Answer 4

Try replacing the spaces in the filename with %20:

background-image: url("Southern%20California%20Sunset.jpg");

In general, avoid spaces in file names. Much easier.