• 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.

0 głosów
88 wizyt
pytanie zadane 21 września w HTML i CSS przez domelcio Użytkownik (500 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 przez VBService Ekspert (203,050 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 przez avexperi Początkujący (300 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 przez domelcio Użytkownik (500 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 przez VBService Ekspert (203,050 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ź 111 wizyt
pytanie zadane 19 kwietnia w HTML i CSS przez Sic Dyskutant (8,470 p.)
0 głosów
1 odpowiedź 130 wizyt
pytanie zadane 10 grudnia 2019 w HTML i CSS przez Mateusz Kasprzak Nowicjusz (170 p.)
0 głosów
1 odpowiedź 178 wizyt

89,694 zapytań

138,297 odpowiedzi

309,243 komentarzy

59,623 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...