背景重复，html不会加长

Question

body {
  font-family: "Bubblegum Sans", cursive;
  background-image: linear-gradient(to right bottom, #b15c3a, #bf7549, #cd8d5b, #daa66f, #e7be86, #e6c38d, #e5c894, #e4cd9b, #d4c092, #c5b489, #b6a781, #a79b78);
  margin: auto;
}
h1 {
  font-family: "Bubblegum Sans", cursive;
  font-size: 50px;
}
a {
  text-decoration: none;
  border: 1px solid black;
  padding: 3px;
  color: black;
  font-family: sans-serif;
  font-family: "Bubblegum Sans", cursive;
  background-color: #b4c5b2;
    box-shadow: 0 10px 6px -6px #777;
  border-radius: 25px;
}
button:hover {
    background-color: #CC7C5D;
}
a:hover {
  background-color: #CC7C5D
}
label {
  letter-spacing: 2px;
}
button {
  font-family: "Bubblegum Sans", cursive;
  letter-spacing: 2px;
  background-color: #b4c5b2;
    box-shadow: 0 10px 6px -6px #777
}
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    
}

img {
    width: 200px;
    height: 200px;
}
header {
    margin-bottom: 10px;
    text-align: center;
}
.arrival img {
    width: 200px;
    height: 200px;
}
.top5 img {
    width: 200px;
    height: 200px;
}
.front_image {
    position: absolute;
    width: 180px;
    height: 180px;
    top: -20px;
}
h1 {
    color: aliceblue;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
p {
    text-align: center;
}
h2 {
    text-align: center;
}
h2 {
    border: black 1px solid;
    background-color: #F9DEA7;
    box-shadow: 0 10px 6px -6px #777;
    border-radius: 25px;
}
#one {
    grid-gap: 10px;
}
#two {
    grid-gap: 10px;
}
#three {
    grid-gap: 10px;
}
img {
    border: black 3px solid;
    border-radius: 25px;
    box-shadow: 0 10px 6px -6px #777;
}
.logo {
    border: none;
    margin-bottom: 50px;
    box-shadow: none;
}

@media screen and (max-width: 640px) { 
    html {
        width: fit-content;
    }

    <img src="https://scontent-syd2-1.xx.fbcdn.net/v/t1.15752-9/274113850_673364380485459_1077356973253538626_n.png?_nc_cat=105&ccb=1-5&_nc_sid=ae9488&_nc_ohc=AizJdQKc83wAX-MumBI&tn=9KISyor-vOFY9gGd&_nc_ht=scontent-syd2-1.xx&oh=03_AVLt0G0RnMan3KnJ_bY8724dlW2SQO__Jk1iNpmgiLcjDg&oe=623B9C68" alt="" class="logo">


<% if logged_in? %>
    <h2>Welcome back</h2>

    <header class="header">    
        <a href="/add_records" class="add_records">Add to your collection</a> 

        <a href="/edit_top_five" class="edit_top5">Edit Top 5</a>

        <a href="/edit_collection" class="edit_collection">Edit Collection</a>

        <a href="/edit_arrival" class="edit_arrival">Edit no.1 Monthly Arrival</a></header>

        <form action="/sessions" method= "POST">
            <input type="hidden" name="_method" value="delete">

            <button class = "logout">Logout</button>
        </form>
    </header>
    <h2>My no.1 Arrival This Month</h2>
    <div class="container" id="one">
        
        <% arrival.each do |no1| %>
            <div class="arrival">
                <p><%= no1['artist_name'] %> </p> <img src="<%= no1['img_url'] %>" alt="">
                <p><%= no1['album_name'] %></p>
                

                <form action="/delete_from_arrival" method="POST">

                    <input type="hidden" name="_method" value="delete">
                    <input type="hidden" name="id" value="<%= no1['id'] %>">
            
                    <button>X</button>
                </form>
            </div>
        <% end %>
        
    </div> 

    <h2>My Top 5</h2>
    <div class="container" id="two">           
        <% top_5.each do |fav| %>
            <div class="top5">
                <p> <%= fav['artist_name'] %> </p><img src="<%= fav['img_url'] %>" alt=""><p><%= fav['album_name'] %></p>
                
            
                <form action="remove_from_top_5" method="POST">

                    <input type="hidden" name="fav_id" value="<%= fav['id'] %>">

                    <button>X</button>

                </form>
            </div>
        <% end %>
    </div>

    <h2>My Collection</h2>
    <div class="container" id="three">
        
        <% records.each do |vinyl| %>
            <div class="collection" id="three">        
                <p><%= vinyl['artist_name']  %> </p>
                <img src="<%= vinyl['img_url'] %>" alt="">
                <p><%= vinyl['album_name'] %></p>
            </div> 
        <% end %>
    </div>      
      
<% else %>

    <header>
        <a href="/users/sign_up">Sign Up</a>
        <a href="/login">Log In</a>
    </header>
<% end %>

这是我当前的主页。 HTML 在注册和登录按钮下方结束。由于我的渐变背景，我刚刚注意到了这一点。如何延长或删除背景的两次重复？

我已上传代码并进行编辑。登录后的其他页面似乎没问题只是登录页面有这个问题，我猜是因为其他页面上的内容更多。

Answer 1

根据更新的问题编辑

这取决于您如何构建 HTML，理想情况下，您应该为文档元素提供背景：

实际上您需要添加的只是

html{
  height:100%;
}

您在 CSS 中的解决方案：

html{
  height:100%;
}

body{
  min-height:100%;
  background-image: linear-gradient(to right bottom, #b15c3a, #bf7549, #cd8d5b, #daa66f, #e7be86, #e6c38d, #e5c894, #e4cd9b, #d4c092, #c5b489, #b6a781, #a79b78);
}

背景重复，html不会加长

Background repeating, html won't lengthen

html

css

ruby

sinatra