Autor | Zpráva | ||
---|---|---|---|
pozadííí Profil * |
#1 · Zasláno: 18. 10. 2014, 15:24:19 · Upravil/a: Moderátor (editace znemožněna) 20. 10. 2014, 10:35:53
Jak vložím obrázkové pozadí přez celou šířku stránky?
Se zachováním poměru stran pozadí. Bez opakování. Např. kdybych chtěl vložit tento wallpaper jako pozadí stránky. Děkuji. |
||
Sennin Profil |
Nazdar pozadííí
Napr. html { background: url(cesta/k-tvojmu-obrazku.xx) repeat-y center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } |
||
pozadííí Profil * |
#3 · Zasláno: 18. 10. 2014, 15:52:29 · Upravil/a: pozadííí
To je ONO, super.
Jen se mi ale nezobrazuje vrchní část obrázku. Sennin: To je ONO, super. Jen se mi ale nezobrazuje vrchní část obrázku. |
||
juriad Profil |
#4 · Zasláno: 18. 10. 2014, 16:01:22
pozadííí:
To je logické, když Sennin obrázek centruje. Změň jeden center na top. |
||
pozadííí Profil * |
#5 · Zasláno: 18. 10. 2014, 16:10:50
juriad:
Obrázek je asi ,,dlouhej" takže je oříznutý spodek. Stránka se může rolovat. Děkuji za trpělivost. |
||
pozadííí Profil * |
#6 · Zasláno: 18. 10. 2014, 19:12:08
pozadííí:
Nepodařilo se mi odkrýt spodek té fotky. |
||
Taps Profil |
#7 · Zasláno: 18. 10. 2014, 19:56:28
pozadííí:
http://jecas.cz/obrazkove-pozadi |
||
pozadííí Profil * |
#8 · Zasláno: 18. 10. 2014, 21:16:13
Hraju si s tím a naprosto o ničem :(
Buď se mi pozadí roztáhne na šířku a spodní část nejde vidět a nezobrazí se ani posuvník. nebo se mi to vyplní na výšku a na stranách je býlí pruh. Řešení, vložit tam posuvník, aby se zobrazovala celý obrázek, ne? |
||
Trejpa Profil |
#9 · Zasláno: 18. 10. 2014, 21:35:09
pozadííí:
„a nezobrazí se ani posuvník.“ Jistě že ne, obrázek z pozadí nedokáže určit výšku elementu. Můžeš tomu elementu, pro který nastavuješ pozadí, zadat min-height: 1200px;, kde číslo označuje výšku použitého obrázku. Bílý. Ach jo. |
||
pozadííí Profil * |
#10 · Zasláno: 18. 10. 2014, 22:41:18 · Upravil/a: pozadííí
posuvník se sice zobrazil, ale
neodkryl tu spodní část pozadí. :( |
||
Trejpa Profil |
pozadííí:
S tím přesným zadáním hodnoty jsem se unáhlil, protože není dopředu známá po zvětšení. Musel by ji vypočítat JavaScript na základě znalosti šířky okna pro BODY nebo konkrétního elementu a poměru stran obrázku. Nicméně i tak mi to funguje, nic se neschovává. |
||
Str4wberry Profil |
#12 · Zasláno: 19. 10. 2014, 00:12:40
„Musel by ji vypočítat JavaScript na základě znalosti šířky okna pro BODY nebo konkrétního elementu a poměru stran obrázku.“
Myslím, že nemusel: Výška závislá na šířce |
||
Trejpa Profil |
#13 · Zasláno: 19. 10. 2014, 09:57:53
Str4wberry:
A jak do toho elementu dáš obsah tak, aby ho v případě větší délky roztáhl? Tím procentním paddingem možná nasimuluješ vlastnost height, ale těžko min-height. |
||
juriad Profil |
Trejpa:
Že těžko? http://kod.djpw.cz/spgb (Opraveno.) |
||
Trejpa Profil |
#15 · Zasláno: 19. 10. 2014, 11:53:24
juriad:
Nějak z tvého příkladu na první pohled nešlo poznat, kam vložit obrázek a proč jeho místo překrývá žlutý a červený blok, které se stejně podle obsahu nezvýší. Tak jsem to dopracoval. |
||
pozadííí Profil * |
#16 · Zasláno: 19. 10. 2014, 12:18:32
Str4wberry:
Teď můžu posuvníkem vidět clé pozadí. Na spod, se mi zobrazil bílý širší pruh. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link rel="shortcut icon" href="img/ikonka.ico"> <style type="text/css"> <!-- body { background: url(http://2imgs.com/2i/i/54439d6d/5cae14d69adf90a74da4b232285da0da/7bc6d0fa29.f.png) top no-repeat; background-size: 100%; } </style> </head> <body> <script> document.body.style= "min-height: "+Math.round(document.body.clientWidth*0.75)+"px;"; </script> </body> </html> |
||
Trejpa Profil |
pozadííí:
„Na spod, se mi zobrazil bílý širší pruh.“ Asi tvůj obrázek nemá poměr stran 4:3 (výška není 75 % šířky). Math.round(document.body.clientWidth*0.75) |
||
Časová prodleva: 9 let
|
0