Obrazek najeżdża na obrazek.

pytanie zadane 21 września 2022 w HTML i CSS przez domelcio Użytkownik (960 p.)

Witam, mam pytanie co mogę zrobić by obrazek nie najechiwał mi na tło? Na tło użyłem background-image.....

A teraz chciałbym by ta smuga była równo na dole.

HTML:
<body>
    <style>
        body {
            background-image: url("tlo-gora.png");
        }
    </style>
    <section class="kontener-top">
        <div class="wrapper">
            <div class="logo">
                <img src="logo magia-gadzetow.png">
            </div>
            <div class="aktualnosci">
                <p class="purple-color">O nas</p>
                <p>Wyróżnione</p>
                <p>Aktualności</p>
                <p>Katalogi</p>
                <div class="background">
                    <p class="Kontakt">Kontakt</p>
                </div>
            </div>
            <div class="background-fb">
                <svg class="svg" width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.54767 12V6.53386H6.61973L6.93016 4.39433H4.54767V3.03168C4.54767 2.41365 4.74059 1.99254 5.73709 1.99254H7V0.0841144C6.78028 0.0581252 6.02642 0 5.14923 0C3.31775 0 2.0643 0.993844 2.0643 2.81977V4.39433H0V6.53386H2.0643V12H4.54767Z"
                        fill="#969BA9" />
                </svg>
            </div>
        </div>
        </div>
    </section>
    <section class="kontener-top-center">
        <div class="tytul">
            <h1>Jesteśmy Czarodziejami<br>Magii Gadżetów</h1>
        </div>
        <div class="cytat">
            <p class="notka">Ciekawość doprowadzi Cię do nas</p>
        </div>
    </section>

    <section class="kontener-center">
        <div class="left">
            <div class="smuga">
                <img src="esencja.png">
            </div>
        </div>
    </section>
</body>
</html>

komentarz 21 września 2022 przez VBService Ekspert (252,700 p.)

BTW,

<body>
    <style>
        body {
            background-image: url("tlo-gora.png");
        }
    </style>
    <section class="kontener-top">
       ? brak <div>
        <div class="wrapper">
            <div class="logo">
                <img src="logo magia-gadzetow.png">
            </div>
            <div class="aktualnosci">
                <p class="purple-color">O nas</p>
                <p>Wyróżnione</p>
                <p>Aktualności</p>
                <p>Katalogi</p>
                <div class="background">
                    <p class="Kontakt">Kontakt</p>
                </div>
            </div>
            <div class="background-fb">
                <svg class="svg" width="7" height="12" viewBox="0 0 7 12" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M4.54767 12V6.53386H6.61973L6.93016 4.39433H4.54767V3.03168C4.54767 2.41365 4.74059 1.99254 5.73709 1.99254H7V0.0841144C6.78028 0.0581252 6.02642 0 5.14923 0C3.31775 0 2.0643 0.993844 2.0643 2.81977V4.39433H0V6.53386H2.0643V12H4.54767Z"
                        fill="#969BA9" />
                </svg>
            </div>
        </div>
        </div>
    </section>
    <section class="kontener-top-center">
        <div class="tytul">
            <h1>Jesteśmy Czarodziejami<br>Magii Gadżetów</h1>
        </div>
        <div class="cytat">
            <p class="notka">Ciekawość doprowadzi Cię do nas</p>
        </div>
    </section>
 
    <section class="kontener-center">
        <div class="left">
            <div class="smuga">
                <img src="esencja.png">
            </div>
        </div>
    </section>
</body>
</html>

2 odpowiedzi

odpowiedź 21 września 2022 przez avexperi Początkujący (440 p.)

Dodałeś tło do body, więc nie dziw się, że wszystko co jest na stronie znajduje się na tym tle.

Dodaj to tło tylko do kontenera top i ustaw mu taką wysokość i szerokość jak chcesz. Zdjęcie drugie zaś w oddzielnym divie o klasie jaką mu nadałeś kontener-center nie najedzie na kontener-top.

Chyba, że dla któregoś z kontenerów dałbyś position: absolute albo ujemny margin-top, wtedy mogłyby na siebie najechać,

komentarz 21 września 2022 przez domelcio Użytkownik (960 p.)

Zrobiłem tak jak napisałeś i nadal mam tak samo. A w tych kontenerach co wymieniłeś mam tylko:

background: rgba(0, 0, 0, 0.16)

padding: 0.32rem 0;

I nic więcej. Jest możliwość, że inne klasy mogą to powodować?

odpowiedź 24 września 2022 przez VBService Ekspert (252,700 p.)

A teraz chciałbym by ta smuga była równo na dole.

Możesz "umieścić" sekcje

<section class="kontener-top">

i

<section class="kontener-top-center">

w obejmującej je sekcji i tej sekcji nadać: background-image, np.:

<body>
  <style>
    .kontener-top-wrapper {
      background-image: url("tlo-gora.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
  </style>
  <section class="kontener-top-wrapper">
    <section class="kontener-top-top">
      <div class="wrapper">
        <div class="logo">
          <img src="logo magia-gadzetow.png">
        </div>
        <div class="aktualnosci">
          <p class="purple-color">O nas</p>
          <p>Wyróżnione</p>
          <p>Aktualności</p>
          <p>Katalogi</p>
          <div class="background">
            <p class="Kontakt">Kontakt</p>
          </div>
        </div>
        <div class="background-fb">
          <svg class="svg" width="7" height="12" viewBox="0 0 7 12" fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <path
                  d="M4.54767 12V6.53386H6.61973L6.93016 4.39433H4.54767V3.03168C4.54767 2.41365 4.74059 1.99254 5.73709 1.99254H7V0.0841144C6.78028 0.0581252 6.02642 0 5.14923 0C3.31775 0 2.0643 0.993844 2.0643 2.81977V4.39433H0V6.53386H2.0643V12H4.54767Z"
                  fill="#969BA9" />
          </svg>
        </div>
      </div>
    </section>
    <section class="kontener-top-center">
      <div class="tytul">
        <h1>Jesteśmy Czarodziejami<br>Magii Gadżetów</h1>
      </div>
      <div class="cytat">
        <p class="notka">Ciekawość doprowadzi Cię do nas</p>
      </div>
    </section>
  </section>

  <section class="kontener-center">
    <div class="left">
      <div class="smuga">
        <img src="esencja.png">
      </div>
    </div>
  </section>
</body>