HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/style.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Raleway:400,500,700&display=swap" rel="stylesheet"> </head> <body> <header class="header"> <div class="container"> <div class="header_inner"> <div class="header_logo"> <img src="/img/activebox-logo.png" alt=""> </div> <nav class="nav"> <a class="head" href="#">Features</a> <a class="head" href="#">Work</a> <a class="head" href="#">Our team</a> <a class="head" href="#">Nestimonuals</a> <a class="head" href="#">Download</a> </nav> </div> </div> </header> </body> </html> css body{ margin: 0; padding: 0; text-decoration: none; font-family: 'Open Sans', sans-serif; font-family: 'Raleway', sans-serif; margin: 0; padding: 0; background: url("/img/intro-bg.jpg") center no-repeat ; color: aliceblue; } *, *:before, *:after{ box-sizing: border-box; } .container{width: 100%; max-width: 1170px; height: 100vh;margin:0 auto; ; } header{ position: relative; } .header_inner{ display: flex; justify-content: space-between; padding: 30px; border-bottom:1px solid black; } .nav{ text-transform: uppercase; font-size: 14px; margin: auto; } .head{ padding: 15px; text-decoration: none; color: #a2a3b0; } .head:hover{ text-decoration: underline; } .head:first-child{ margin-left: 0; } .head:hover{ opacity: 1; } .intro{ height: 750px; position: absolute; }
background-size: cover; background-repeat: no-repeat; background-position: 100% 100%; И не вешать картинку на Body, создай section какой нибудь и уже туда вешай.
Сэл, Это не выравнивание изображения... А позиционирование играй с Z-INDEX и POSITION в интернете информации тонна.