Как хорошо адаптировать такой фон?

Question

Как хорошо адаптировать такой фон?

Рейтинг: 0Ответов: 1Опубликовано: 12.07.2023

Если написать background-size: cover - обрезается текст. Следовательно выглядит не красиво.
Если написать background-size: contain - изображение не растягивается на всю ширину монитора создавая белые пространства. (задать черный бекраунд колор не вариант т.к цвет у фона картинки не черный). Задача состоит в том, чтоб фон был на всю ширину экрана, но текст не должен обрезаться. Как это сделать?

.header {
    height: 1080px ;
    background-image: url(../images/header-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right top;
    
    
}

.header__top {
    padding-top: 45px;
    display: flex;
    justify-content: space-between;

}

.menu {
    transform: translateY(-5px);
}

.menu__list {
    display: flex;
    align-items: center;
    gap: 67px;

}

.menu__list-link {
    display: flex;
    align-items: center;
    font-family: Kanit;
    font-weight: 500;
    font-size: 20px;
    color: #B4BEC9;
    transition: color .2s ease;

}

.menu__list-link:hover {
    color: #fff;
}

.menu__list-btn {
    font-size: 16px;
    letter-spacing: -0.32px;
    color: inherit;
    border: 1px solid #159A9C;
    border-radius: 15px;
    background-color: #159A9C;
    padding: 15px 57px;
    cursor: pointer;
    transition: all .2s ease;
}

.menu__list-btn:hover {
    background-color: rgba(21, 154, 156, 0.60);
    border-color: transparent;
}

.header__title {
    display: none;
}

<header class="header">
        <div class="container">
            <div class="header__top">
                <a class="logo" href="#">
                    <img class="logo-img" src="images/logo.png" alt="Лого">
                </a>
                <nav class="menu">
                    <ul class="menu__list">
                        <li class="menu__list-item">
                            <a class="menu__list-link" href="#">
                                Photo
                            </a>
                        </li>
                        <li class="menu__list-item">
                            <a class="menu__list-link" href="#">
                                Video
                            </a>
                        </li>
                        <li class="menu__list-item">
                            <a class="menu__list-link" href="#">
                                Portfolio
                            </a>
                        </li>
                        <li class="menu__list-item">
                            <a class="menu__list-link" href="#">
                                Contacts
                            </a>
                        </li>
                        <li class="menu__list-item">
                            <button class="menu__list-btn">
                                Contact us
                            </button>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="header__title">
                <h1>Focus.on</h1>
            </div>
        </div>
    </header>

Вот этот фон в codepen. https://codepen.io/Loremord/pen/PoxEQwN

css html

Источник: Stack Overflow на русском

Answer 1

▲ 0

Можно задать background для body, все элементы будут всегда внутри фонового изображения, также если задать background-position: 50% top то изображение будет как-бы приклеено к верху экрана и находится точно посередине. При таком подходе изображение не будет больше чем оно есть, чтобы не было белого пространства на более высоких разрешениях экрана можно задать background-color

  body {
    background-image: url('https://ic.wampi.ru/2023/07/12/header-bg.jpg');
    background-color: #020C0E;
    background-position: 50% top;
    background-repeat: no-repeat;
    background-size: contain;
  }

Можно также сократить код:

body {
  background: #020C0E url('https://ic.wampi.ru/2023/07/12/header-bg.jpg') 50% top no-repeat;
  background-size: contain;
}

Если необходимо чтобы изображение всегда было растянуто по максимуму, то добавьте body максимальную высоту экрана height: 100vh;

Как хорошо адаптировать такой фон?

Ответы