背景图像和 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 顶部边距的问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-03 03:53:30

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-03 03:53:30

解决方案1
1 已采纳 2020-08-03 03:53:30