title: How to remove the background colour of HTML page?
body: <p>I'm creating a web app for a side project and not sure how to remove the grey background-colours behind each of the images. To test the back-end, I have implemented my HTML page with CSS and JavaScript. I'm not sure certain whether I need to change it from CSS or JavaScript code..</p>
  <p><a href="https://i.stack.imgur.com/Qg7Gh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qg7Gh.png" alt="enter image description here" /></a></p>
  <p>I tried everything by making the background-colour as white or transparent, but it doesn't seem to work properly.</p>
  <p>HTML</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;!-- Required meta tags --&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
    &lt;!-- Bootstrap CSS --&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
      integrity=&quot;sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl&quot; crossorigin=&quot;anonymous&quot;&gt;
  
    &lt;title&gt;Good Cop, Bad Cop&lt;/title&gt;
    &lt;style&gt;
      .view-image img {
        margin-left: 90px;
      }
    &lt;/style&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/landing.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;../css/coach_selection.css&quot; /&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css&quot; /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    
    &lt;div class=&quot;image&quot;&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; id=&quot;dog-button&quot; class=&quot;btn btn-light&quot;&gt;
          &lt;img src=&quot;../images/dog.png&quot; id=&quot;dog&quot; alt=&quot;dog&quot;&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; id=&quot;mother-button&quot; class=&quot;btn btn-light&quot;&gt;
          &lt;img src=&quot;../images/mother.png&quot; id=&quot;mother&quot; alt=&quot;mother&quot;&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; id=&quot;soldier-button&quot; class=&quot;btn btn-light&quot;&gt;
          &lt;img src=&quot;../images/military.png&quot; id=&quot;soldier&quot; alt=&quot;soldier&quot;&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; id=&quot;teacher-button&quot; class=&quot;btn btn-light&quot;&gt;
          &lt;img src=&quot;../images/teacher.png&quot; id=&quot;teacher&quot; alt=&quot;teacher&quot;&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;view-image&quot; style=&quot;display:none;&quot;&gt;
        &lt;img src=&quot;&quot; width=&quot;150&quot; height=&quot;150&quot; /&gt;
        &lt;div class=&quot;button&quot; id=&quot;button-other&quot;&gt;&lt;span&gt;Other&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;button&quot; id=&quot;button-confirm&quot; onclick=&quot;redirectHome()&quot;&gt;
      &lt;span&gt;Confirm&lt;/span&gt;
    &lt;/div&gt;
    
      
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js&quot;
        integrity=&quot;sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0&quot;
        crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.2.10/firebase-app.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/8.2.10/firebase-firestore.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;../scripts/FireBase_API.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;../scripts/coach_scripts/coach_selection.js&quot;&gt;&lt;/script&gt;
      
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.image {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    margin-top: 40px;
    margin-left: 50px;
  }
  
  .image img {
    cursor: pointer;
  }
  
  .image img:hover {
    border: solid 2px #1e88e5;
    border-radius: 2px;
  }
  
  .image #mother img:hover {
    border: solid 2px #1e88e5;
    border-radius: 2px;
  }
  
  .image img {
    width: 100px;
    height: 100px;
    text-align: center;
    padding: 10px;
    margin-left: 30%;
  }
  
  .button{
    width: 80px;
    height: 40px;
    margin: 10px auto 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: rgb(43, 43, 219);  
    cursor: pointer;
    border-radius: 2px;
  }
  
  .button:hover{
     background-color: #242424;
  }
  .button:active{
     background-color: #121212;
  }
  
  .button &gt; span{
    color: #eeeeee;
    text-align: center;
  }
  </code></pre>
  <p>JavaScript</p>
  <pre><code>var elementSelected = null;
  var typeSelected = false;
  
  $(document).on('click', '.image &gt; img', function(){
    $('.image &gt; img').each(function(){
      $(this).removeClass('active');
    })
    $(this).addClass('active');
    elementSelected = $(this);
    typeSelected = false;
  });
  
  $(document).on('input', '#text-src', function(){
    $('.image &gt; img').each(function(){
      $(this).removeClass('active');
    })
    elementSelected = $(this);
    typeSelected = true;
  })
  
  $(document).on('click', '#button-confirm', function(){
    $('.image').hide();
    if(typeSelected == true){
      $('.view-image &gt; img').attr('src', elementSelected.val());
      $('.button').hide();
    }
    else{
      $('.view-image &gt; img').attr('src', elementSelected.attr('src'));
    }
    $('.view-image').fadeIn('high');
  })
  
  $(document).on('click', '#button-other', function(){
    $('.view-image').hide();
    $('.image').fadeIn('high');
  })
  </code></pre>