• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Obrazek najeżdża na obrazek.

VPS Starter Arubacloud
0 głosów
181 wizyt
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>

image

komentarz 21 września 2022 przez VBService Ekspert (251,210 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

+1 głos
odpowiedź 21 września 2022 przez avexperi Początkujący (400 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ć?
0 głosów
odpowiedź 24 września 2022 przez VBService Ekspert (251,210 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>

 

Podobne pytania

0 głosów
1 odpowiedź 167 wizyt
pytanie zadane 19 kwietnia 2022 w HTML i CSS przez Sic Dyskutant (8,510 p.)
0 głosów
1 odpowiedź 347 wizyt
pytanie zadane 10 grudnia 2019 w HTML i CSS przez Mateusz Kasprzak Nowicjusz (170 p.)
0 głosów
1 odpowiedź 419 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...