How to create an image container in html

Question

I want to add an image container to my multiple choice quiz so that is can auto resize and image and put it above the question container (see my sketch), I have attempted with container2 (it's the container with hello) and has failed miserably. I just don't know how to put an image into that container so it resizes itself and so that the bottom of the image container touches the top of the question container. I do admit that I am new to coding so I want some help trying to figure this out.

const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const image1 = document.getElementById('image1')
const answerButtonsElement = document.getElementById('answer-buttons')
const endbutton = document.getElementById('end-btn')
const trybutton = document.getElementById('try-btn')
const startmsgs = document.getElementById('startmsg')
const images = document.getElementById('container2')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})
endbutton.addEventListener('click', () => {
  window.top.close()
})

trybutton.addEventListener('click', setNextQuestion)

function startGame() {
  startButton.classList.add('hide')
  startmsgs.classList.add('hide')
  shuffledQuestions = questions.slice()
  questionContainerElement.classList.remove('hide')
  currentQuestionIndex = 0
  setNextQuestion()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
  trybutton.classList.add('hide')
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  setStatusClass(selectedButton, correct);
  if(correct){
    if (shuffledQuestions.length > currentQuestionIndex + 1) {
      nextButton.classList.remove('hide')
    } else {
      endbutton.classList.remove('hide')
    }
  } else{
     trybutton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  }
  else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}

const questions = [
  {
    question: 'Are you excited to learn about the immune system?',
    answers: [
      { text: 'Yes', correct: true },
      { text: 'YES!!!', correct: true },
      { text: 'No', correct: false },
      { text: 'YES!!!!!!!', correct: true }
    ]
  },
  {
    question: 'Our immune system protects from the thousands of different viruses we encounter daily! Without it, a simple paper cut could mean death. So to demonstrate how the immune system functions to protect us from bacterias, viruses and foreign bodies, we start our journey with a paper cut!',
    answers: [
      { text: 'I am exicted!', correct: true },
    ]
  },
  ]

*, *::before, *::after {
  box-sizing: border-box;
  font-family: cursive,
  'Times New Roman', Times, serif
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #b61924; */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 1;
}

:root {
  --hue-neutral: 200;
  --hue-wrong: 0;
  --hue-correct: 145;
}

body {
  --hue: var(--hue-neutral);
  padding: 0;
  margin: 0;
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-color: hsl(var(--hue), 100%, 20%);
}

body.correct {
  --hue: var(--hue-correct);
}

body.wrong {
  --hue: 0;
}

.container {
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
  z-index: 2;
} 

.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: hsl(var(--hue), 100%, 50%);
  border-radius: 5px;
  padding: 5px 10px;
  color: white;
  outline: none;
}

.btn:hover {
  border-color: black;
}

.btn.correct {
  --hue: var(--hue-correct);
  color: black;
}

.btn.wrong {
  --hue: var(--hue-wrong);
}

.next-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  align-items: flex-end;
  --hue: 245;
}

.start-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.end-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.try-btn {
  font-size: 1.5rem;
  font-weight: bold;
  padding: 10px 20px;
  --hue: 245;
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center; 
  font-family: Arial;
  font-size: xx-large;
  padding: 10px 10px;

}

.container2 { 
  width: 800px;
  max-width: 80%;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 0 10px 2px;
  top:20%;
  position:absolute;
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center; 
}

.hide {
  display: none;
}

.wrapper { 
    position: absolute;
    top: 0px;
    right: 0px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="styles.css">
  <script defer src="script.js"></script>
   <title>Quiz App</title>
</head>
<body>
  </div>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn">Answer 1</button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div> 
    </div>
    <div class="container1">
      <div id="startmsgcontainer" class="hide"></div>
        <div id="startmsg">Adventure Into The Human Immune System</div>
        </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start!</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
      <button id="end-btn" class="end-btn btn hide">End (this will close the current tab)</button>
      <button id="try-btn" class="try-btn btn hide">Try again!</button>
    </div>
  </div>
  <div class="wrapper">
      <img src="img/uni.png" alt="image">
  </div>
  <div class="container2">
    <div id="imgcontainer">hello</div>
    <div id="image1" class="hide">
      <img src="img/wantedvirus.png" alt="image1">
  </div>
  </div>
 </div> 
  <div id="particles-js"></div>
  <script src="particles.js"></script>
  <script src="app.js"></script>
</body>
</html>

]2]2

Answer 1

here % help to be responsive an image.

.container {  
  background-image: url(yourimage.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover; 
  background-size: 100% 100%;
}```

Answer 2

Couldn't you just add the image into the question container like so?

`.question-container{
  background-image: url(images/yourimage.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}`

Answer 3

To make your image responsive just add property like this

.responsive{
 width: 100%;
  height: auto;
}

<img src="url" class="responsive">