Question 44879 in Html Question posted in
Some basic documentation can be found here.

How to stretch background from top to bottom? – Html

I am using an image as my background for my website, but it won’t stretch from top to bottom.
This is what the webpage looks like:

enter image description here

As you can see in the bottom right corner, the image is tiling. This is my HTML:

<!doctype html>
<html lang="en" data-bs-theme="dark">
{% load static %}
{% load crispy_forms_tags %}

<head>
    <title>Create Itinerary</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.png' %}"/>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<body id="bg" style="padding: 2%; background-image: url('{% static 'images/pexels-photo-10768835.jpeg'%}'); background-repeat: repeat-y; background-size: 50%; background-position: right;">
    {% block content %}
        <div style="width: 48%; background-color: white; height: 100%;">
            <h1 class="mt-2">Create Itinerary</h1>
            <hr class="mt-0 mb-4">

            <form method="post" novalidate>
                {% csrf_token %}
                {{ form|crispy }}
                <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Create Itinerary</button>
            </form>
        </div>
    {% endblock %}
</body>

Does somebody know what is happening?

Tags:

2

Answers


  1. 0

    because of background-repeat: repeat-y; you are facing this problem.
    Another minor improvement that I would suggest, instead of giving these styles to the body, it would be better if you can add a parent div inside the body and apply styles on that, I’ve corrected your css below:

    <body id="bg" style="margin:0px">
  <div style="background-image: url('{% static 'images/pexels-photo-10768835.jpeg'%}'); background-repeat: no-repeat; background-size: 50%; background-position: right; height: 100vh;">
    {% block content %}
        <div style="width: 48%; background-color: white; height: 100%;">
            <h1 class="mt-2">Create Itinerary</h1>
            <hr class="mt-0 mb-4">

            <form method="post" novalidate>
                {% csrf_token %}
                {{ form|crispy }}
                <button type="submit" class="btn btn-primary" style="margin-top: 10px;">Create Itinerary</button>
            </form>
        </div>
    {% endblock %}
  </div>
</body>
    Login or Signup to reply.
  2. 0

    Use background-image CSS

        background-image:url("../media/photo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search