如何在Django模板中设置背景图像?

时间:2018-01-20 21:30:02

标签: python django web-frameworks

我是Django的新手并且正在将它用于我的项目,直到我面临一个小问题,这个问题非常小但是从2天开始困扰我。 如何在django模板中应用背景图像?

这是我的index.html: -

    <!DOCTYPE html>
{% load static %}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel=" stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Dosis:800" rel="stylesheet">
    <title>Document</title>
    <style type="text/css">
        body {
          background: url({% static "images/dumb2.jpg" %});
          background-size: cover;
        }

        .heading {
            color: white;
            font-family: 'Sedgwick Ave Display', cursive;
            font-size: 10vw;
            letter-spacing: 20px;
            color: rgb(0, 255, 170);
            padding-top: 20px;
            font-family: 'Cabin Sketch', cursive;
        }

        .data-rows {
            padding-top: 10px;
        }

        .textfield-labels {
            color: white;
            font-weight: 600;
        }

        .textfield {
            border: 5px solid black;
        }

        .signup-heading {
            color: white;
            font-family: 'Dosis', sans-serif;
            letter-spacing: 20px;
        }

        .bored {
            height: 300px;
            width: 300px;
        }

        .font-icons {
            color: white;
            font-size: 50px;
        }

        .description {
            color: white;
            font-weight: 600;
        }

        .first-description {
            padding: 10px;
            border-radius: 20px;
            border: 1px solid rgb(117, 19, 19);
            animation-name: first-block;
            animation-duration: 6s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .left-column {
            padding: 20px;
        }

         ::-moz-placeholder {
            text-align: center;
        }

         ::-webkit-input-placeholder {
            text-align: center;
        }

        @keyframes first-block {
            from {
                background-color: rgba(255, 0, 0, 0);
            }
            to {
                background-color: rgb(117, 19, 19);
            }
        }
    </style>
</head>

<body>
    <div class="container-fluid text-center">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="heading">DUMBSTER</h1>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row p-3">
            <!--<div class="col-sm-8">
                <center><img src="bored.png" class="bored">
                    <p class="description">A place for People with a Disease of getting bored.</p>
                    <p class="description">Share your Thoughts, Share your Problems and Date if you like !</p>
                </center>
            </div>-->
            <div class="col-sm-4 text-center left-column">
                <p>
                    <div class="container first-description">
                        <p><i class="fa fa-users font-icons"></i></p>
                        <p class="description">Share Your best Momenst and Collect Stars. Don't Hide any emotion and any Problem because there is always a solution</p>
                    </div>
                </p>
                <div class="container first-description">
                    <p><i class="fa fa-star-half-full font-icons"></i></p>
                    <p class="description">Rate anyone Anonymously on the basis of their Characteristics that You like !</p>
                </div>
            </div>

            <div class="col-sm-4 signup-column p-5">
                <div class="container signup-box">
                    <div class="row text-center">
                        <div class="col-sm-12">
                            <h4 class="signup-heading">Sign Up</h4>
                            <hr>
                        </div>
                    </div>
                    <form class="form-horizontal signup-form">
                        <div class="row data-rows">

                            <div class="col-sm-12">
                                <input type="text" class="textfield form-control" placeholder="Your name" id="username" maxlength="25">
                                <div class="errors" id="username_error"></div>
                            </div>
                        </div>
                        <div class="row data-rows">

                            <div class="col-sm-12">
                                <input type="text" class="textfield form-control" placeholder="Email-id" id="email" maxlength="50">
                                <div class="errors" id="email_error"></div>
                            </div>
                        </div>
                        <div class="row data-rows">

                            <div class="col-sm-12">
                                <input type="text" class="textfield form-control" placeholder="Mobile no." id="phone" maxlength="10">
                                <div class="errors" id="phone_error"></div>
                            </div>
                        </div>
                        <div class="row data-rows">

                            <div class="col-sm-12">
                                <input type="password" class="textfield form-control" placeholder="Password" id="password" maxlength="30">
                                <div class="errors" id="password_error"></div>
                            </div>
                        </div>
                        <div class="row data-rows">

                            <div class="col-sm-12">
                                <input type="password" class="textfield form-control" placeholder="Re-type Password" id="cpassword" maxlength="30">
                                <div class="errors" id="cpassword_error"></div>
                            </div>
                        </div>
                        <hr>
                        <div class="row text-center">
                            <div class="col-sm-12">
                                <button class="btn btn-info">Sign Up</button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
            <div class="col-sm-4 text-center left-column">
                <p>
                    <div class="container first-description">
                        <p><i class="fa fa-heartbeat font-icons"></i></p>
                        <p class="description">Find a heart that Beats with your heart by Dating anonymously !</p>
                    </div>
                </p>
                <div class="container first-description">
                    <p><i class="fa fa-bolt font-icons"></i></p>
                    <p class="description">Share what you think anout the Latest Trends going on in the society</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

我已将STATICFILES_DIR = [STATIC_DIR,]设置为STATIC_DIR = os.path.join(BASE_DIR, 'static')

我的项目文件夹中有一个静态文件夹,里面是图像文件夹。 但经过这么多尝试后,我仍然无法解决这个背景图像问题。

2 个答案:

答案 0 :(得分:1)

这里有一个小错误: 背景:url({%static“ images / dumb2.jpg”%});

应该是这样的: 背景图片:url('/ static / images / dumb2.jpg');

答案 1 :(得分:0)

永远不要迟到回答。错误的一种可能来源:您可能遇到语法错误。应该是:

background-image: url({% static "images/dumb2.jpg" %}); 

不是

background: url({% static "images/dumb2.jpg" %});