Html Can'；在覆盖图上看不到背景图像

我有一个包含django表单的覆盖图，背景图像没有显示出来。我在背景中有一个轮廓图像，填充页面，理想情况下随页面大小移动。然后一张桌子放在它的中心，里面有我的表格，我试着让它透明

昨天我盲目地摆弄css，它已经不见了

    {% extends 'prodman/basenew.html' %}
    {% load staticfiles %}
    {% block pagetitle %}Time and Expenses{% endblock %}

    {% block content %}

    <iframe name="hiddenFrame" class="hide"></iframe>
        <div id="overlay">
            <form id= "person-form" target='hiddenFrame' method = 'POST' action="" class="overlay-form" enctype="multipart/form-data">{% csrf_token %}
                <table id="add-person-form" class="overlay-table">
                <tr></br></br>{{ personform.first_name }}</tr>
                <tr></br></br>{{ personform.surname }}</tr>
                <tr></br></br>{{ personform.email }}</tr>
                <tr></br></br>{{ personform.position }}</tr>
                <tr></br></br>{{ personform.contract_type }}</tr>
                <tr></br></br>{{ personform.mentor }}</tr>
                <tr></br></br><font color="white">Assign as a coach?&nbsp;</font>{{ personform.make_person_coach }}</tr>
                </table>
                </br>
                <input type = "submit" id = "save" value = "Add person">
                </br>
                </br>
                <strong>Click here to [<a href='#' onclick='overlay()'>close</a>]</strong>
            </form>
        </div>

        <a href='#' class='class1' onclick='overlay()'>Add person</a>
<p>Some more html here....</p>
    {% endblock %}

为了以防万一，下面是如何触发覆盖的：

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

---

谢谢

看起来你的html和css都很好：我猜django无法访问你的样式表来呈现{%static%}。当我在django中处理背景图像时，我通常会在html模板中添加一个内联样式标记

style=“background image:url（{%static'url%}）；”

@JonasGiuro刚刚尝试了一个内联样式标记，这很有效，谢谢！在我的样式表中，它昨天是如何工作的仍然很奇怪，而现在不是。。。。没有内联线看起来好多了。但是谢谢！：）@Pete这不应该是个问题，它可以作为内联样式标记使用！嗯，我想皮特可能是对的。试试这个：

background-image:url（“{%static”tande/images/screet.png“%}”）我已经试过了，把内联部分去掉了，我们又回到了没有背景图像的状态！
#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-image:url('{% static 'tande/images/silhouette.png' %}');
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: center;
}
#overlay div {
     width:800px;
     margin: 100px auto;
     background: #cccccc;
     border: 1px solid #000;
     padding:15px;
     text-align:center;
}
form.overlay-form {
     width:800px;
     margin: 350px auto;
}
table.overlay-table tr td {
    background: rgb(54, 25, 25); 
    background: rgba(54, 25, 25, 0); 
    border-style: none;
    margin-right: 40%;
    margin-bottom: 30%;
    position: relative;
    text-align: center;
    width: 800px;
}
add-person {
    text-align: right;
    margin-right: 10px;
    width: 10px;
}
body {
     height:100%;
     margin:0;
     padding:0;
}

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}