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

HTML a CSS HTML a CSS Problém s absolutním pozicováním American English version English version

Aktivity (1)
Avatar
Vojta Korduliak:26. května 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. května 22:21
Avatar
Vojta Korduliak:27. května 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. května 0:36
Avatar
Vojta Korduliak:27. května 1:39

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

 
Nahoru Odpovědět 27. května 1:39
Avatar
Lukáš
Redaktor
Avatar
Odpovídá na Vojta Korduliak
Lukáš:27. května 8:36

Jaké bylo řešeni? :)

 
Nahoru Odpovědět 27. května 8:36
Avatar
Vojta Korduliak:27. května 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. května 13:42
 
Nahoru Odpovědět 27. května 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.