Autor Zpráva
Kowalsky95
Profil
Dobrý den, mám dotaz ohledně pozadí.
Mám problém v tom, že potřebuji aby bylo pozadí složené ze dvou obrázků. Z toho první by měl 500px, druhý by se táhl až po konec stránek. Přes ně by byla teprve samotná stránka. Problém spočívá v tom, že neznám výšku stránky, která se načte. Takže nedokážu určit výšku obrázku na pozadí. Prvotní úmysl byl dát dva obrázky na pozadí a pomocí CSS position:absolute je vložit na stránku, s height:500px;width:100% a width:100% pro druhý, ovšem výšku neznám, protože potřebuji aby byla dlouhá vzhledem k obsahu stránek. Chtěl jsem to udělat pomocí JS, ale když na div stránky zavolám object.style.height.value nebo object.style.offsetHeight tak se mi vrátí "undefined". Máte prosím nějaké řešení?
Ještě rekapitulace: potřebuji dva obrázky které bude překrývat div, a potřebuji aby výška spodního obrázku se nastavila podle výšky stránky(divu). Není určená výška obrázku ani divu.

Děkuji za odpovědi
margin
Profil *
Zkus nahrát obrázek jak to má vypadat, na nějaký obrázkový hosting a předpokládám, že se najde méně obskurní řešení.
Kowalsky95
Profil

Doufám že to takhle stačí...
Hlavně aby ten prvek stránky překrýval ty dva obrázky.....podobný efekt jak mají na http://www.minecraftforum.net/
že první mají tu trávu, potom jako pozadí to hnědé a teprve na tom je vlastně web..akorát tady to je přesně propočítané, což já nebudu mít.
Jak se tak dívám i na googlu tak to asi ani nepude :/
Trejpa
Profil
Kowalsky95:
<body style="background: url(zluta.png) center 232px repeat;"><!-- nebo DIV -->
  <div style="background: url(modra.png) center 0 repeat-x;">
    <div style="background: url(cervena.png) center 0; margin: 42px auto 31px; width: 500px;">
      Stránka, neznám výšku.
    </div>
  </div>
</body>
Kowalsky95
Profil
Úžasné, na tohle bych sám nepřišel. Děkuji mnohokrát. ;-)
Nicméně to má ještě pár much, a to jest že u posledního divu se nastaví margin nahoře, a tím se posune celá stránka, i s těmi pozadí nad tím. Dále je tu věc, že při velké výšce nepřiléhá žluté a červené pozadí stejně. Takže zde vypisuje celkové řešení které jsem měl na mysli:
<style>
#prvni
{
background-image: url('zlute.png');
background-repeat: repeat;
background-position: center 500px;   /* 500px aby přesně doléhal na modré pozadí, například jde-li o obrázek*/
position:relative;
top: 300px;      /*dovoluje posunutí na konci stránky, takže "prvni" a "treti" budou končit ve stejném místě*/
}
#druhy
{
background-image: url('modry.png'); /*jeho výška musí být přesně těch 500 pixelů*/
background-repeat: repeat-x;
background-position: center top;
position:relative;
top: -300px;   /*posunutí zpět nahoru, protože "prvni" div je posunut o 300px dolů*/
}
#treti
{
margin: 0px auto 0px; /*zarovnání na střed, jdou použít i jiné hodnoty. první a třetí ale musí zůstat 0px*/
position: relative;
top: 300px; /*opět posunutí vzhledem k "druhému" divu, nyní jsou posunuty "prvni" a "treti" stejně*/
width: 500px;
background-color: red;
}
</style>

<div id="prvni"> <!-- zlute pozadi -->
<div id="druhy"> <!-- modre pozadi -->
<div id="treti"> <!-- cervene pozadi -->
stranka
</div></div></div>

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: