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-imagebackground-size 移动到独立的body 中。 【参考方案1】:

尝试将background-imagebackground-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的背景图像和边距顶部问题的主要内容,如果未能解决你的问题,请参考以下文章

如何删除 HTML 表格中的行之间的分隔?

CSS位置固定和边距0自动

Android初学者填充和边距之间的区别[重复]

位置和边距顶部负值不适用于 html 电子邮件模板 [关闭]

如何消除页面顶部的空白?

背景图像剪辑到可拖动的 div