我无法在Flask应用中使用CSS设置背景

Question

I'm creating a web app with Flask. I created a style.css file and was able to use it successfully to specify some table attributes. But when I try to use code from CSS Tricks to add a background image for my landing page, the image fails to show.

CSS:

html {

    /* Source: https://css-tricks.com/perfect-full-page-background-image/ */
    background: url(static/landing_page.jpeg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I created a simple test.html file that uses the same CSS and it worked (the image showed up, and was scaled properly).

Answer 1

Using built in function url_for you can get this inside jinja html, just place this on your css style

url("{{url_for('static',filename="landing_page.jpg")}}");

In general when you refer to a static file , a common practice is to target it through url_for function.

Answer 2

该URL必须是url(landing_page.jpeg) ，而不是url(static/landing_page.jpeg) 。