Как убрать отступ сверху background?

Question

Есть следующий код:

HTML:

    <!-- Main -->
    <main class="main">
        <div class="container main__contentainer">
            <h1 class="main__header">TEXT</h1>
            <p class="main__description">text</p>
            <button class="main__button">text</button>
        </div>
    </main>

CSS:

body {
    font-family: 'Cuprum', sans-serif;
    margin: 0; 
    padding: 0;
}

.container {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Main */
.main {
    background: url("../images/fone.png") no-repeat center top;
}

Пытаюсь растянуть фоновое изображение в блоке Main, но сверху есть отступ которые ни как не получается убрать. HTML CSS занимаюсь не давно, подскажите в чем проблема, заранее спасибо.

Answer 1

Попробуйте в свойствах прописать этот код.

*{
  margin: 0;
  padding: 0;
}

Возможно,дело не в самой картинке,а что-то ей даёт отступ. Код убирает все дефолтные отступы у контента,которые устанавливаются браузерами по умолчанию.

Answer 2

*{
  margin: 0;
  padding: 0;
}

Убирает все лишние отступы. Ниже приведены примеры фоновой картинки, ещё примеры можно посмотреть тут.

*{
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Cuprum', sans-serif;
  margin: 0; 
  padding: 0;
}

.container {
    max-width: 1720px;
    margin-left: auto;
    margin-right: auto;
}

/* Main */
.main1 {
  background: center / cover no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}

.main2 {
  background: no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}

.main3 {
  background: center / contain no-repeat url("https://www.interfax.ru/ftproot/photos/photostory/2022/04/29/week/week7_1100.jpg");
}

Hello world
  <script src="script.js"></script>
  <main class="main1">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 1</h1>
      <p class="main__description">text 1</p>
      <button class="main__button">text 1</button>
    </div>
  </main>

  <main class="main2">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 2</h1>
      <p class="main__description">text 2</p>
      <button class="main__button">text 2</button>
    </div>
  </main>

  <main class="main3">
    <div class="container main__contentainer">
      <h1 class="main__header">TEXT 3</h1>
      <p class="main__description">text 3</p>
      <button class="main__button">text 3</button>
    </div>
  </main>

Помните, что вы задаете фон блоку main, а не для всей странице. Если вы по прежнему видите непонятные отступы, вы можете посмотреть в инструментах разработчика (Dev Tools), к какому элементу относится отступ.

БЛОГ НА HUSL

Как убрать отступ сверху background?

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