Resizing Background Image next to div

Question

I'm trying to make my front page responsive and really only have 2 elements to worry about. I have a background image starting from the left and a div containing various objects associated with the right side of the screen. I'd like to have it so that when the browser shrinks, the background image shrinks appropriately so that the div on the right side doesn't start intersecting with the image. As needed after a certain point I'm willing to make the background image disappear altogether so that the div has more space. How would I be able to do that? The code is very simple. Just a background image starting from the left and a div with right: 0%.

body
{
    background-color: #EAE7DC;
    background-image: url("images/Earth.jpg");
    background-repeat: no-repeat;
}

.block1
{
    position: absolute;
    right: 0%;
    top: 113px;
    min-width: 415px;
}

<div class="block1">
    <h1>Log In</h1>
    <form>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button type="button" onclick="logIn()">Log In</button>
    </form>
</div>

Answer 1

Add to your style:

body
{
    background-color: #EAE7DC;
    background-image: url("images/Earth.jpg");
    background-repeat: no-repeat;
    background-size: calc(100vw - 430px) 100%;
}

The first expression in background-size is width and the second is height. I used with calc() in order to get 100% of the viewport width (vw) minus the width of your block1