1) Использовать отрицательный margin начиная с определенной ширины (+ обязательно поставьте overflow:hidden для контейнера, иначе будет горизонтальная полоса прокрутки)
Например
.header {
overflow:hidden;
}
@media (min-width: 1300px) {
.header-logo {
margin-left: -100px;
}
}
2) Сделать общий контейнер для фона и контента, при этом фон будет как position: absolute, а контент position: relative
<div class="hero-section">
<div class="hero-section__bg">
...контент фона
</div>
<div class="hero-section__content">
<div class="container">
...контент
</div>
</div>
</div>
.hero-section {
position: relative;
}
.hero-section__content {
position: relative;
z-index: 1;
}
.hero-section__bg {
position: absolute;
z-index: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
}
@media (min-width: 900px) {
.hero-section__bg {
width: 45%;
}
}
