title: CSS background position center
body: <p>How can I put the following image in the center of the page? I tried background-position = center but it appears at the top bottom. Help!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
      $('.question-out').hide();
      $('.plus-drop-down').hide();
  
      $('i.fa-bars').on('click', function(){
        $('.side-menu').css({
          'transform': 'translateX(0px)',
          'box-shadow': '5px 5px 5px #ddd'
        });
      });
  
      $('.plus').on('click', function(){
          $(this).toggleClass('active');
          $('.plus-drop-down').toggle().css({
              'animation': 'hello .3s'
          });
          $('.join').toggle();
      });
  
      $('i.fa-th').on('click', function(){
          $(this).toggleClass('active');
      });
  
      $('.account').on('click', function(){
          $(this).toggleClass('active');
      });
  
      $('.question-mark').on('click', function(){
          $(this).toggleClass('active');
          $('.question-out').toggle().css({
              'animation': 'pop .3s'
          });
      });
  
      $('.username').html(
          'Gan Yi Ming'
      ).css({
          'color': '#d6d6d6',
          'font-size': '12px'
      });
  
      $('.email').html(
          'ganyiming0609810@gmail.com'
      ).css({
          'color': '#d6d6d6',
          'font-size': '12px'
      });
  
  });
  $(document).mouseup(function (e) {
      const container = $(".side-menu");
      const ae = $('.plus');
      const re = $('.question-mark');
  
      if (!container.is(e.target) // if the target of the click isn't the container...
      &amp;&amp; container.has(e.target).length === 0) {
          $('.side-menu').css({
              'transform': 'translateX(-300px)',
              'box-shadow': 'none'
          });
      }
  
      if (!re.is(e.target)
      &amp;&amp; re.has(e.target).length === 0){
          $('.question-out').hide();
          $('.question-mark').removeClass('active');
      }
  
      if (!ae.is(e.target)
      &amp;&amp; ae.has(e.target).length === 0){
          $('.plus-drop-down').hide();
          $('.plus').removeClass('active');
      }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
      padding: 0;
      margin: 0;
      text-decoration: none;
      list-style: none;
      font-family: sans-serif;
      color: black;
      transition: .3s;
  }
  body{
      background-image: url('background.png');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 30%;
  }
  .nav_bar{
      border-bottom: 1px solid #dddddd;
      display: flex;
      justify-content: space-between;
      line-height: 65px;
      position: fixed;
      width: 100%;
  }
  .nav_bar *{
      display: flex;
      align-items: center;
  }
  
  i.fa-bars{
      font-size: 20px;
      color: #535353;
      padding: 10px;
      border-radius: 50%;
      margin: 0 0px 0 15px;
  }
  i.fa-bars:hover{
      background-color: #f8f8f8;
  }
  .fa-bars.active{
      background-color: #d6d6d6dd;
  }
  .fa-bars.active:hover{
      background-color: #d6d6d6dd;
  }
  .google-icon{
      cursor: default;
      transform: translateY(1px) translateX(4px);
  }
  .classroom{
      font-size: 22px;
      cursor: text;
      color: #353535;
  }
  .plus{
      width: 20px;
      padding: 10px;
      border-radius: 50%;
      margin: 0 10px 0 0;
  }
  .plus:hover ~ .join{
      visibility: visible;
      position: absolute;
      animation: hello;
  }
  .plus.active{
      background-color: #d6d6d6dd;
  }
  .plus.active:hover{
      background-color: #d6d6d6dd;
  }
  .plus-drop-down{
      background-color: #fff;
      position: absolute;
      display: inline-block;
      border-radius: 3px;
      line-height: 30px;
      top: 55px;
      box-shadow: 0 0 3px 1px rgb(204, 204, 204);
      right: 130px;
      padding: 5px 0;
  }
  .plus-drop-down li{
      padding: 0 30px 0 15px;
      font-size: 15px;
      color: #353535;
  }
  .plus-drop-down li:hover{
      background-color: #ddd;
  }
  .join{
      background-color: black;
      opacity: 0.7;
      color: white;
      font-size: 10px;
      position: absolute;
      border-radius: 3px;
      padding: 0 10px;
      visibility: hidden;
      top: 55px;
      height: 30px;
      transition: ease-in-out;
      transition-delay: .3s;
      right: 80px;
  }
  .th{
      color: #4b4b4b;
      border-radius: 50%;
      padding: 10px;
      font-size: 20px;
      margin: 0 10px 0 0;
  }
  .app{
      background-color: black;
      opacity: 0.6;
      color: white;
      position: absolute;
      border-radius: 2px;
      top: 60px;
      right: 50px;
      border-radius: 3px;
      font-size: 12px;
      height: 20px;
      padding: 0 5px;
      visibility: hidden;
      transition-delay: .4s;
  }
  .fa-th:hover ~ .app{
      visibility: visible;
  }
  .account-menu{
      position: absolute;
      color: rgb(214, 214, 214);
      background-color: black;
      opacity: 0.6;
      top: 60px;
      display: block;
      right: 20px;
      height: 60px;
      line-height: 20px;
      border-radius: 3px;
      padding: 5px 5px;
      visibility: hidden;
      transition-delay: .3s;
  }
  .account-menu p{
      display: block;
  }
  .account:hover ~ .account-menu{
      visibility: visible;
  }
  .account-menu .show-acc{
      color: white;
      font-size: 14px;
  }
  .fa-th.active{
      background-color: #d6d6d6dd;
  }
  .fa-th.active:hover{
      background-color: #d6d6d6dd;
  }
  .account{
      width: 35px;
      border-radius: 50%;
      padding: 5px;
      margin: 0 15px 0 0;
  }
  .account.active{
      background-color: #d6d6d6dd;
  }
  .account.active:hover{
      background-color: #d6d6d6dd;
  }
  .account:hover, .th:hover, .plus:hover{
      background-color: rgb(243, 243, 243);
  }
  .side-menu{
      display: flex;
      position: fixed;
      transform: translateX(-300px);
  }
  .side-menu *{
      color: #4e4e4e;
  }
  .main-menu{
      min-width: 300px;
      background-color: #fff;
      height: 100vh;
      top: 0;
  }
  .up{
      display: flex;
      cursor: pointer;
  }
  .one{
      padding: 18px 18px 20px 10px;
      margin: 10px 5px 0 0;
      background-color: #dcf2ff;
      border-radius: 0 30px 30px 0;
      display: flex;
      align-items: center;
  }
  .fa-home{
      font-size: 20px;
      margin: 0 0 0 10px;
  }
  .one li a p{
      font-size: 14px;
      font-weight: bold;
      margin: 0 0 0 20px;
  }
  .two{
      padding: 18px 18px 20px 10px;
      margin: 0px 5px 10px 0;
      border-radius: 0 30px 30px 0;
      display: flex;
      align-items: center;
      transition: none;
  }
  .two:hover{
      background-color: #f7f7f7;
  }
  .fa-calendar{
      font-size: 20px;
      margin: 0 0 0 12px;
  }
  .two li a p{
      font-size: 14px;
      font-weight: bold;
      margin: 0 0 0 23px;
  }
  .three{
      padding: 18px 18px 20px 10px;
      margin: 5px 5px 10px 0;
      border-radius: 0 30px 30px 0;
      display: flex;
      align-items: center;
      transition: none;
  }
  .three:hover{
      background-color: #f7f7f7;
  }
  .fa-cog{
      font-size: 20px;
      margin: 0 0 0 10px;
  }
  .three li a p{
      font-size: 14px;
      font-weight: bold;
      margin: 0 0 0 23px;
  }
  .top-two{
      border-bottom: 1px solid #ddd;
  }
  .question-mark{
      width: 20px;
      position: fixed;
      bottom: 0;
      margin: 0 0 20px 20px;
      border-radius: 50%;
      padding: 10px;
  }
  .question-mark:hover{
      background-color: rgb(238, 238, 238);
  }
  .question-mark.active{
      background-color: rgb(216, 216, 216);
  }
  .question-out{
      background-color: #fff;
      position: absolute;
      bottom: 60px;
      margin: 0 0 0 20px;
      border-radius: 5px;
      min-width: 250px;
      box-shadow: 0 0 3px 1px rgb(204, 204, 204);
  }
  .question-out li:nth-child(1){
      margin: 10px 0 0 0;
  }
  .question-out li:nth-child(4){
      margin: 0 0 10px 0;
  }
  .question-out li{
      padding: 7px 0 7px 10px;
      font-size: 15px;
  }
  .question-out li:hover{
      background-color: #dddddd;
  }
  @keyframes hello{
      0%{
          scale: 0;
          transform: translateY(-30px);
      }
      100%{
          scale: 10;
          transform: translateY(0px);
      }
  }
  @keyframes pop{
      0%{
          transform: translateY(30px);
      }
      100%{
          transform: translateY(0px);
      }
  }
  @media screen and (max-width: 480px){
      #nine-dot, .account{
          display: none;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Classes&lt;/title&gt;
  
      &lt;link rel="icon" href="classroom.png"&gt;
      &lt;link rel="stylesheet" href="/Coding/Google Classroom/style.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class="nav_bar"&gt;
              &lt;div class="left"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25"&gt;
                                  &lt;path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/&gt;
                                  &lt;path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/&gt;
                                  &lt;path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/&gt;
                                  &lt;path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/&gt;
                                  &lt;path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/&gt;
                                  &lt;path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/&gt;
                              &lt;/svg&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;p class="classroom"&gt;Classroom&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="right"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;
                              &lt;img class="plus" src="plus.png" alt=""&gt;
                              &lt;p class="join"&gt;Create or join a class&lt;/p&gt;
                              &lt;ul class="plus-drop-down"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Join class&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Create class&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;i id="nine-dot" class="fas fa-th th"&gt;&lt;/i&gt;
                              &lt;p class="app"&gt;Google apps&lt;/p&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;img class="account" src="account.png" alt=""&gt;
                              &lt;div class="account-menu"&gt;
                                  &lt;p class="show-acc"&gt;Google Account&lt;/p&gt;
                                  &lt;p class="username"&gt;&lt;/p&gt;
                                  &lt;p class="email"&gt;&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;aside id="menu" class="side-menu"&gt;
          &lt;div class="main-menu"&gt;
              &lt;div class="top-two"&gt;
                  &lt;div&gt;
                      &lt;ul class="up one"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;
                              &lt;p&gt;Classes&lt;/p&gt;&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;ul class="up two"&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;i class="far fa-calendar"&gt;&lt;/i&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;
                                  &lt;p&gt;Calendar&lt;/p&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="up three"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;i class="fas fa-cog"&gt;&lt;/i&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;
                              &lt;p&gt;Settings&lt;/p&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;img class="question-mark" src="Question.png" alt=""&gt;
              &lt;ul class="question-out"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;What's New&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Report issue or request feature&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Help Center&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Help Community&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/aside&gt;
      
      &lt;script src="/Coding/Google Classroom/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/8TbB5.png" rel="nofollow noreferrer">enter image description here</a></p>