How to clip a background image using css without affecting its size?

Question

I'm using a picture I found on Google Images as a background image. However, a Google Search bar appears at its top. On its left hand side various icons/logs such as WhatsApp, Gmail etc...appears too. I've tried various css rules like, clip: rect(), background-position, background-clip to get rid of them so the user won't see them. But in vain so far. Just so there's no confusion I want the image to be smaller but still covering the background.

const select = document.querySelector("select");
const button = document.querySelector("button");
const intro = document.querySelector(".intro");
const quiz = document.querySelector(".quiz");
const introMessage = document.querySelector(".introMessage");
const quizImage = document.querySelector(".quizImage img");
console.log(quizImage.src)



let japaneseAnimeJapanese = [
{
  name: "ドラゴンボール",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "進撃の巨人",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "ナルト",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "鬼滅の刃",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "攻殻機動隊",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]

let japaneseAnimeEnglish = [
{
  name: "dragon ball",
  picture: "https://dbgbh.bn-ent.net/assets/img/news/news_thumb_kv.png"
},
{
  name: "Attack On Titans",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJYjy_bS8t3ScWyG7q94fIltnar3ChaOHmGA&usqp=CAU"
},
{
  name: "naruto",
  picture: "https://res.cloudinary.com/jerrick/image/upload/v1616592065/605b3cc118e784001e22da0d.jpg"
},
{
  name: "Demon Slayer",
  picture: "https://cdn.vox-cdn.com/thumbor/gcVHhhZ4VwVswvbDPvI-RfQ7ECQ=/1400x1050/filters:format(png)/cdn.vox-cdn.com/uploads/chorus_asset/file/19721018/Tanjiro__Demon_Slayer_.png"
},
{
  name: "Ghost in the shell",
  picture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8VBbI5HMki5cmjP_Gq0TdyA6VZn_0_fmkhg&usqp=CAU"
}
]

select.addEventListener("change", displayButton);
button.addEventListener("click", startQuiz);

function displayButton() {
  button.style.display = "block"
  introMessage.style.display = "none"
}

function startQuiz() {
  button.style.display = "none";
  quiz.style.display = "flex";
  intro.style.display = "none";
  quizImage.src = japaneseAnimeEnglish[0].picture

}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("images/backgroundImage.jpeg");
  background-clip: padding-box;
  /* clip: rect(0px,25px,25px,0px); */
  padding: 10px;
  background-position: 200%, 200%;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  min-width: 100vw;

}

.rule {
  position: absolute;
}

button {
  display: none;
  position: absolute;
  /* top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); */
  background-color: #f1f1f1;
  color: black;
  font-size: 16px;
  padding: 16px 30px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

button:hover {
  background-color: black;
  color: white;

}

.introMessage {
  background: white;
  color: red;
  width: 70%;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  white-space: nowrap;
}

h2 {
  text-align: center;
}

select {
  transform: translateY(50px);
}

.quiz {
  display: none;
  justify-content: center;
  position: relative;

  border: 1px black solid;
  height: 800px;
  width: 800px;
}

.quizImage {
  height: 500px;
  width: 500px;
  margin-top: 50px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.multipleChoice {
  position: absolute;
  bottom: 10px;
}

.choice {
  border: 1px black solid;
  border-radius: 10px;
  margin-bottom: 5px;
  width: 500px;
  height: 25px;
  text-align: center;
  background: rgb(97, 99, 90);
  color: white;
}

.choice:hover {
  transform: scale(1.1);
  background: rgb(77, 120, 66);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>

    <div class="intro">
      <h1 class="introMessage">Welcome to the anime quiz! Select a language and get started</h1>
      <select class="" name="">
        <option value="">Select a  language</option>
        <option value="">English</option>
        <option value="">日本語</option>
      </select>
      <button type="button" name="button">Button</button>
    </div>
    <div class="quiz">
      <div class="quizImage">
        <img src="" alt="">
      </div>
      <div class="multipleChoice">
        <div class="choice">Choices1</div>
        <div class="choice">Choices2</div>
        <div class="choice">Choices3</div>
        <div class="choice">Choices4</div>
        <div class="choice">Choices5</div>
      </div>
      <h1 class="rule">Select answer corresponding to the image</h1>
    </div>
  </body>

  <script src="index.js" type="text/javascript"></script>
</html>