CODEWITHSUNDEEP
cssflask
Kwsswart
Kwsswart

Reputation: 541

Why is background image not displaying with the Flask application

I am currently trying to style my flask application. The entire idea is to have a backdrop of books, thus to allow it to seem like a library as the application is based around book reviews and possibly purchasing in the future.

I have linked the style.css through the below html code in the layout.html template:

  <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">

I have setup the file and folder structure as so:

 application.py
 venv/
 templates  /  layout.html
 templates  /  login.html
 static  /  styles.css
 static  /  books.jpg

So far I have done the following to try to solve this:

1 Disabled browser caching in inspect > network (hasn't changed anything)

2 Tried applying the style directly within the page.

  1. I have found that the only way to sort out the problem of no updating is to reload using cntl + f5

I would love some advice on how to get the CSS to behave in an expected way and to reload when reloading through the browser without having to to use the ctrl+f5 method.

What is the best method to do this?

Here is the full css for the layout.html


    /* Reset page */
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    body{
        width:100%;
        background-image: url("books.jpg") no-repeat center fixed;
        background-size: cover;
    }
    #content{
        background-color: #252629;
        text-align: center;
        height: 100%;
        padding-left:5%;
        padding-right:5%;
        margin-left: 15%;
        margin-right: 15%;
        margin-top:10%;
    }
    
    /*nav bar*/
    #nav-bar{
        height: 10%;
        background-color:#252629;
        opacity: 85%;
    }
    ul.nav{
        line-style: None;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    li.nav{
        width:33%;
        display: inline-block;
        float: left;
    }

and below is the HTML code of layout.html, incase I have done something wrong within this:

    <!DOCTYPE html>
    <html lang="en">
        <Head>
            <link rel="stylesheet" type="text/css" href="{{url_for('static', filename='style.css')}}">
            <script src="{{url_for('static', filename='script.js')}}"></script>
            <title>{%block title%}{%endblock%}</title>
            {%block head%}{%endblock%}
        </Head>
        <body>
            <div id="nav-bar">
                <ul class="nav">
                    {% if session.user_id %}
                        <li class="nav">
                            <form action="{{url_for('api')}}" method="post">
                                <input type="text" name="api" placeholder="Enter isbn for API"> 
                                <button id="api">API Search</button>
                            </form>
                        </li>
                            <form action="{{url_for('search')}}" method="post">
                                <input type="text" name="search" placeholder="Title, Author, or ISBN">
                                <button id="search">Search</button>
                            </form>
                        </li>
                        <li class="nav"><button id="logout">Log Out</button></li>
                    {% else %}
                        <li class="nav"><button id="login">Log In</button></li>
                        <li class="nav"><button id="Register">Register</button></li>
                    {% endif %}
                </ul>
            </div>
            <div id="content">
                {% block content%}
                {%endblock%}
            </div>
        </body>
    </html>

I have not included the application.py as it literally is just returning render_template('index.html') at the moment as I am focusing on the design first.

as said previously I would love some assistance on getting the CSS to behave correctly and reload with the browser without needing the ctrl+f5 method and also how to get the massive background-image to fill the window without zooming in.

Upvotes: 1

Views: 2269

Answers (2)

yuviscor
yuviscor

Reputation: 29

It will display just change the port and specify the full path in the background-image=url(), for example if my image is in the static then in the image folder I will be doing this url(../images/img.jpg);. Clear you browser history or restart your computer if it is still not working.

Upvotes: 0

doğukan
doğukan

Reputation: 27389

Because your syntax is incorrect. If you want to write the background properties with shorthand, you have to use background: property, not background-image:

So, you can use like this:

background: url("books.jpg") center/cover no-repeat  fixed;

Or

background-image: url("books.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

Upvotes: 1

Related Questions