Как наложить картинку на header?

Question

Как мне такое сделать? (картинку на header)

Код моей шапки:

<header class="d-flex justify-content-around p-3 align-items-center">
    <img src="img/logo.svg" alt="">
    <div class="nav-links d-flex align-items-center">
        <div class="nav-link"><img src="img/search.svg" alt=""></div>
        <div class="nav-link"><img src="img/cart.svg" alt=""></div>
        <div class="nav-link"><a href="#" class="signup">Sign up</a></div>
        <div class="nav-link"><a href="#" class="signin">Sign in</a></div>
    </div>
</header>

Answer 1

Если header position: static (т.е. не должен прилипать к верху экрана), то просто разбейте блок на две части. Пример на bootstrap:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container row">
  <div class="col col-md-auto">
    <img src="https://static2.gazeta.ua/img2/cache/gallery/984/984368_1_w_590.jpg?v=0" width="300">
  </div>
  <div class="col py-2">
    <header>
      <h2>Header</h2>
    </header>
    <p>Content</p>
  </div>
</div>

БЛОГ НА HUSL

Как наложить картинку на header?

Ответы (1 шт):