How to stretch background from top to bottom?

Question

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:

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?

Does this answer your question? [Vertically stretch background image](https://stackoverflow.com/questions/12694559/vertically-stretch-background-image) — Kundan, Feb 25 '23 at 02:28

Harshit T · Accepted Answer · 2023-02-25T06:43:42.153

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>

Just had to edit it a bit. Thanks so much! – kool Feb 25 '23 at 15:44 — kool, Feb 25 '23 at 15:44

score 1 · Answer 2 · answered Feb 25 '23 at 02:58

1

Use background-image CSS

    background-image:url("../media/photo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

answered Feb 25 '23 at 02:58

Ronnie Royston

16,778
6
77
91

How to stretch background from top to bottom?

2 Answers2