Как вытянуть фон во всю ширину при адаптиве?

Question

[WoodyAndBuzz]

При уменьшении окна фон обрезается. Как его вытянуть.

<div class="header ">
        <div class="header-content container">
            <div class="block-1">              
                <a href=""><img class="logo" src="image/logo.png" alt=""></a>
                <ul class="menu">
                   <li class="menu-link"><a href="" class="menu-link">Home</a></li>
                   <li class="menu-link"><a href="" class="menu-link">Services</a></li>
                   <li class="menu-link"><a href="" class="menu-link">Portfolio</a></li>
                   <li class="menu-link"><a href="" class="menu-link">Blog</a></li>
                   <li class="menu-link"><a href="" class="menu-link">Contact Us</a></li>
                   <li class="menu-link"><a href="" class="menu-link">Login</a></li>
                </ul>
            </div>
            <div class="block-2">
                <p class="flat">FLAT + FREE = FLABY</p>
                <p class="text-modern">A Modern Flat design corporate template for free download with all great features and trendy look.</p>
                <div class="button">
                    <a href=""><img src="image/google.png" alt=""></a>
                    <a href="" class="learn"><img src="image/learn.png" alt=""></a>
                </div>
            </div> 
        </div>      
    </div>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after{
    box-sizing: border-box;
}

body{
    font-family: 'Raleway', 'sans-sherif';
}

.container{
    max-width: 1140px;
    padding: 0 15px;
    margin: 0 auto;
}
.header{
    background: url(image/phone.jpg) no-repeat center center;
    height: 841px;
}

.block-1{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #FFFFFF;
}

.menu{
    display: flex;
    padding-top: 31px;
    padding-bottom: 33px;
}

.menu-link{
    padding: 10px;
    display: block;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
}

.menu-list{
    position: relative;
}

.logo{
    padding-top: 39px;
}

.menu-link:hover{
    background-color: #479EE1;
    border-radius: 15px;
}

.block-2{
    padding-top: 252px;
}

.flat{
    color: #FFFEFE;
    font-size: 40px;
    font-weight: 500;
}

.text-modern{
    color: #FEFEFE;
    font-size: 26px;
    font-weight: 500;
    width: 502px;
    padding-top: 31px;
}

.button{
    padding-top: 69px;
}

.learn{
    padding-left: 24px;
}

Comments

[Ankhena]

Во-первых, нужно изучить значения свойства background-size https://developer.mozilla.org/ru/docs/Web/CSS/back... и выбрать подходящее.

Во-вторых, судя по скрину, проблема не только в фоне, а в том, что какой-то элемент или псевдоэлемент выпал из ширины body.
Самый простой способ понять это: задать им всем outline и посмотреть, кто торчит.

[ambisinister One]

WoodyAndBuzz, Общий фон задать и ширину контейнера в процентах.

Answer 1

[Ilya Olovyannikov]

.class {
  background-size: cover;
}

Comments

[WoodyAndBuzz]

Пробовал не выходит.

[Ilya Olovyannikov]

WoodyAndBuzz, пожалуйста, воспроизведи проблему на codepen / jsfiddle

[WoodyAndBuzz]

Я бы с радостью. Вот только он не будет видеть моих картинок. Я делал сайт локально.

[Ankhena]

WoodyAndBuzz, картинки заменяются на любые другие из яндекс.картинок или можно пользоваться сервисами заглушек https://picsum.photos/ и т.д.