Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Problém s absolutním pozicováním

Aktivity
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:26.5.2018 22:21

Ahoj,
když se někdo podívá na mou stránku, tak chci aby při každém rozlišení objevil obrázek roztáhlý na celé obrazovce.
Tento problém jsem vyřešil tímto kódem:

background: url(images/background.png) no-repeat center center;
position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-size: cover;
        background-attachment: scroll  ;
        background-position: center  ;
        background-repeat:repeat;
        background-origin: content-box;

Jenže to nefungovalo
má to vypadat takto

Děkuji za případné rady.

 
Odpovědět
26.5.2018 22:21
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:27.5.2018 0:36

Upřesnění problému:
Chci docílit toho efektu, že když návštěvník přijde na mou webovku, tak první co se mu ukáže je toto . (část stránky s full screen pozadím. Když by návštěvník scrolloval dolů, tak by se mu ukázal další obsah. Podobně to je zde , akorát tady je ten obrázek zafixovaný a já potřebuji aby se pohyboval s tím jak návštěvník scrolluje.) Zatím jsem tomu dal rozměr výšky 1000px, takže to dobře vypadá jen na mém(či jemu podobném) monitoru. Zkoušel jsem to tím kódem co jsem poslal, ale bohužel mi to nefunguje. A po nastavení position: absolute web přestal vnímat tu část stránky jako by tam byla a všechen obsah co býval pod tím se nahrnul na to.

 
Nahoru Odpovědět
27.5.2018 0:36
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:27.5.2018 1:39

Problém jsem už teď vyřešil. Omlouvám se za menší spam.

 
Nahoru Odpovědět
27.5.2018 1:39
Avatar
Lukáš
Tvůrce
Avatar
Odpovídá na Vojta Korduliak
Lukáš:27.5.2018 8:36

Jaké bylo řešeni? :)

 
Nahoru Odpovědět
27.5.2018 8:36
Avatar
Vojta Korduliak
Člen
Avatar
Vojta Korduliak:27.5.2018 13:41

Řešení jsem našel na w3school pod názvem parallax.
CSS:

.bgimg-1 {
  position: relative;
  opacity: 0.65;
  background-position: center;
  background-size: cover;
  background-image: url("img_parallax.jpg");
  min-height: 100%;}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

HTML:

<div class="bgimg-1">
  <div class="caption">
    <span class="border">SCROLL DOWN</span>
  </div>
</div>
Editováno 27.5.2018 13:42
 
Nahoru Odpovědět
27.5.2018 13:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.