div的背景图像和边距顶部问题
Posted
技术标签:
【中文标题】div的背景图像和边距顶部问题【英文标题】:Issue with background image and margin top of a div 【发布时间】: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
中。
【参考方案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的背景图像和边距顶部问题的主要内容,如果未能解决你的问题,请参考以下文章