div 的背景图片和页边距问题

Question

我正在尝试在 Django 表单模板上添加背景。问题是，如果我在表格顶部没有边距，背景图像就可以了。但是每当我尝试添加一些边距时，背景就会被分割（在我的表单顶部和页面顶部之间）：

这是我的。html:

 <style>
        html, body {
            height: 100%;                
            background-image: url("{% static 'places/img/banana_palms.jpg' %}");
            background-size: cover;
        }
    
        .registration-form-container {
            width: 400px;
            margin: auto;
            background-color: white;
        }

        .auth-box {            
            border: 3px solid lightblue;
            border-radius: 10px;
            padding-top: 25px;
            padding-bottom: 25px;
            width:500px;
            margin:auto;
            background-color: white;
        }
        </style>
</head>

<body>
    
        <div class="auth-box text-center mt-5">
            {% block content %}
            
            {% endblock %}
        </div>
   
</body>
</html>

我应该如何更正我的代码以使背景显示良好？

Answer 1

尝试将 background-image 和 background-size 移动到独立的 body。

改变这个

html, body {
    height: 100%;                
    background-image: url("{% static 'places/img/banana_palms.jpg' %}");
    background-size: cover;
}

对此：

html, body {
    height: 100%;                
}
body {
    background-image: url("{% static 'places/img/banana_palms.jpg' %}");
    background-size: cover;
}

div 的背景图片和页边距问题

Issue with background image and margin top of a div

html

django-templates

background-image

twitter-bootstrap