CSS центр положения фона

Question

Как разместить следующее изображение в центре страницы? Я попытался background-position = center, но он появляется сверху внизу. Помогите!

$(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...
    && container.has(e.target).length === 0) {
        $('.side-menu').css({
            'transform': 'translateX(-300px)',
            'box-shadow': 'none'
        });
    }

    if (!re.is(e.target)
    && re.has(e.target).length === 0){
        $('.question-out').hide();
        $('.question-mark').removeClass('active');
    }

    if (!ae.is(e.target)
    && ae.has(e.target).length === 0){
        $('.plus-drop-down').hide();
        $('.plus').removeClass('active');
    }
});

*{
    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;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Classes</title>

    <link rel="icon" href="classroom.png">
    <link rel="stylesheet" href="/Coding/Google Classroom/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav class="nav_bar">
            <div class="left">
                <ul>
                    <li>
                        <a href="#">
                            <i class="fas fa-bars"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" width="90" height="25">
                                <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"/>
                                <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"/>
                                <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"/>
                                <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
                                <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"/>
                                <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"/>
                            </svg>
                        </a>
                    </li>
                    <li><a href="#"><p class="classroom">Classroom</p></a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">
                            <img class="plus" src="plus.png" alt="">
                            <p class="join">Create or join a class</p>
                            <ul class="plus-drop-down">
                                <li><a href="#">Join class</a></li>
                                <li><a href="#">Create class</a></li>
                            </ul>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i id="nine-dot" class="fas fa-th th"></i>
                            <p class="app">Google apps</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img class="account" src="account.png" alt="">
                            <div class="account-menu">
                                <p class="show-acc">Google Account</p>
                                <p class="username"></p>
                                <p class="email"></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside id="menu" class="side-menu">
        <div class="main-menu">
            <div class="top-two">
                <div>
                    <ul class="up one">
                        <li>
                            <a href="#"><i class="fas fa-home"></i></a>
                        </li>
                        <li><a href="#">
                            <p>Classes</p></a>
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="up two">
                        <li>
                            <a href="#">
                                <i class="far fa-calendar"></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <p>Calendar</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div>
                <ul class="up three">
                    <li>
                        <a href="#">
                            <i class="fas fa-cog"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <p>Settings</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <img class="question-mark" src="Question.png" alt="">
            <ul class="question-out">
                <li><a href="#">What's New</a></li>
                <li><a href="#">Report issue or request feature</a></li>
                <li><a href="#">Help Center</a></li>
                <li><a href="#">Help Community</a></li>
            </ul>
        </div>
    </aside>
    
    <script src="/Coding/Google Classroom/script.js"></script>
</body>
</html>

введите описание изображения здесь

Answer 1

Вы очень близки. Попробуйте добавить background-attachment: fixed; к своему телу css, и вы получите то, что хотите.

Вы можете прочитать о background-attachment, если вам нужна дополнительная информация здесь: https://www.w3schools.com/cssref/pr_background-attachment.asp