| 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: 13 let
|
|||
0