Search code examples
htmltwitter-bootstrapdjango-templatesbackground-image

Issue with background image and margin top of a div

I m trying to add a background on a Django form template. The issue is that if I have no margin top to the form, the background image is fine. But whenever I try to add some margin, the background is split (between the top of my form and the top of my page) :

enter image description here

Here is my .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>

How should I correct my code so the background display nicely?

Solution

  • Try moving background-image and background-size into the independent body.

    Change this

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

    to this:

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