'Background image does not show up

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. location of html and images

My code

Where I obtained the background image:

Southern California Sunset.jpg

htmlcss


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[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.

Solution 4:[4]

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shruti
Solution 2 PaulProgrammer
Solution 3 user2998548
Solution 4 slideshowp2

Related Questions