Background repeating, html won't lengthen

February 24, 2022

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 %>

This is my current home page. The HTML ends just under the signup and login buttons. Because of my gradient background I’ve just noticed this. How can I lengthen or just remove the two repeats of the background?

I’ve uploaded the code as and edit.
The other pages once logged in seem ok just the login page is having this issue, I’m guessing because there is more content on the other pages.

>Solution :

EDITED according to the updated question

This depends on how you structured your HTML, ideally you should have background given for your document element:

Practically all you need to add is

html{
  height:100%;
}

Your solution in your 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);
}