Autor | Zpráva | ||
---|---|---|---|
Kowalsky95 Profil |
#1 · Zasláno: 2. 4. 2013, 19:51:46
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 * |
#2 · Zasláno: 2. 4. 2013, 19:59:10
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 |
#3 · Zasláno: 2. 4. 2013, 20:17:55
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 |
#4 · Zasláno: 2. 4. 2013, 21:12:28
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 |
#5 · Zasláno: 3. 4. 2013, 13:50:24
Úž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> |
||
Časová prodleva: 11 let
|
0