div的背景图像和边距顶部问题答案

【问题标题】：Issue with background image and margin top of a divdiv的背景图像和边距顶部问题
【发布时间】：2020-11-23 03:47:08
【问题描述】：

我正在尝试在 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>

我应该如何更正我的代码以便背景显示得很好？

【问题讨论】：

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

标签： html twitter-bootstrap django-templates background-image

【解决方案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;
}

【讨论】：