I am doing my final project and in my website I wish to have an image as the background and I have saved that image in a file on my workspace. The body background property is not supported in HTML5 so, I am using the css background image property but the image doesn't load. The console shows an error of 404, file not found. I have tried both of saving the image in the same directory as my html file and in some other directory and have provided the proper url(path) in the css url. Any suggestions why this may not be working? Also, I have used the URL like (../project/image.jpg), (/project/image.jpg). Tried a number of ways , none works. How can I have background images uploaded in my jinja supported html fileson cloud9 ?


You need to store (and serve) the image from the static directory or a subdirectory thereof. static is the default static_url_path (and static_folder) when the app object is created and configured here app = Flask(__name__) in application.py. You can refer to this doc for more detailed information about the application object constructor. For instance:

static_folder – the folder with static files that should be served at static_url_path. Defaults to the 'static' folder in the root path of the application.

(I eventually ended up at the flask documentation after every hit for "flask serve image" mentioned "static". Doh! It's similar to "public_html" or "public" in apache.)

Suggest you create an images or similar subdirectory of static that contains image.jpg. Then the background-image: directive will be `url('/static/images/image.jpg').

Make sure you can access the image from the address bar as with:

If you cannot access it from the address bar, the flask server will not be able to access it either. It might save troubleshooting time.

  • Hey! You are genius man, I mean I spent almost two days reading the docs but couldn't find any one of that mentioning that it had to be the subdirectory of the css file.Can u plse share with me that doc? Also, how did u knwo we had to access that using the static/images/image.jpg and not the full url project/static/images/image.jpg and also can u plse elaborate why should I be checking the image from address bar with ide50-username.cs50.io:8080/static/images/image.jpg ? – sk.76 Aug 18 '18 at 16:13
  • added more detail to answer. I hope it addresses your questions. – DinoCoderSaurus Aug 18 '18 at 18:02
  • Thank you, that completely answers all of my previous questions but now there's another problem. The css background property works fine if I include it in the index.html using {% block head %} {{ super() }} <style type="text/css"> body { background-image: url("/static/image/donate.jpg"); background-size: cover; } </style> {% endblock %} and it doesn't work if I include it in a similar way in index.html of my project directory. – sk.76 Aug 19 '18 at 12:00
  • The code that I shared above is here for clarity : pastebin.com/W6sMVkTT I mean it works fine I include it in index.html of pset7 but doesn't work if include it in index.html of my project. – sk.76 Aug 19 '18 at 12:06
  • Hey, I'm sorry to bother you but this was all a silly mistake of mine. I had saved the image file with a different name and was referring it with a different name. THANKS FOR ALL UR HELP, DINOCODERSAURUS! – sk.76 Aug 19 '18 at 12:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .