1

I am trying to add a background image to a simple site I am trying to make, but get a 404 error on the image and no background when I try to use the local jpg file I downloaded. However when I use a link from an image on the web the image appears correctly.

Here is my file structure for the code:

website/
     run.py
     project/
        __init__.py
        routes/
             home.py
        templates/
             layout.html
             homepage.html
             img/
                image.jpg

Here is the code I am trying to run to get the image to show as the background in homepage.html:

  <head>
    <title>Welcome!</title>

    <style type="text/css">
      body{
       background-image: url('/img/image.jpg');
       min-height: 100%;
       background-size:100%
      }
    </style>
  </head>

I have tried all these variations on the url but none have worked for displaying the background: 

background-image: url('/img/image.jpg');
background-image: url("/img/image.jpg");
background-image: url(/img/image.jpg);
background-image: url('/website/project/templates/img/image.jpg');
background-image: url("/website/project/templates/img/image.jpg");
background-image: url(/website/project/templates/img/image.jpg);
background-image: url('project/templates/img/image.jpg');
background-image: url("project/templates/img/image.jpg");
background-image: url(/project/templates/img/image.jpg);

And pretty much every other combination of that filepath and quote options. I've even put in the filepath starting from my root directory, file:///Users/kyle/Desktop/programming/website/project/templates/img/image.jpg. This displays the image if I copy and paste it into my browser but not if I put it in the url field of the background image.

Keeping all the code the same, any image whose link I take from google works however but I would like to get a local image working if possible.

Kyle
  • 89
  • 2
  • 13
  • Post your python code that handles the routing/serving. – Phix Mar 17 '19 at 08:38
  • That code is @homepage_blueprint.route('/', methods=['POST', 'GET']) @homepage_blueprint.route('/home', methods=['POST', 'GET']) def homepage(): return render_template('homepage.html') – Kyle Mar 17 '19 at 08:53
  • The body tag is missing from the html you wrote, I suppose it is there you just forgot it from the question? – Kata Mar 17 '19 at 09:50
  • Yea the body tag is in there, I just posted the section of the html where I tried to call the background-image – Kyle Mar 17 '19 at 16:41

2 Answers2

0

Try it without slash

background-image: url('img/image.jpg');
buffy.cz
  • 66
  • 5
0

Try using flask’s templating feature with the url_for function:

background-image: {{ url_for(image.jpg) }}

Read this post for referring to folders.

koopmac
  • 936
  • 10
  • 27