| Autor | Zpráva | ||
|---|---|---|---|
| sitole Profil |
#1 · Zasláno: 5. 12. 2014, 19:33:18
Dobrý den, potřebuji s pozadím na jednom webu
Mám obrázke který chci na pozadí webu, ale chci aby na všech minitorech byl stejný. Obrázek bude dejme tomu v 720p aby na velkých monitorech byl co nejméně rozmazaný. Ted když otevřu stránku na notebooku aby tam byl stále celý obrázek jako například na TV. Hledal jsem možnost jak toto udělat ale vždy tam není vše |
||
| Marschmallow Profil |
sitole:
Co když bude jiný poměr stran monitoru - třeba místo 16:9 16:10, nebo na starších i 4:3? Má se ten obrázek zdeformovat (i to je řešení)? EDIT: Opraven poměr stran z 4:30 na 4:3. Díky, Tomáši123 [#5] |
||
| lionel messi Profil |
sitole:
Ak je odpoveď na otázku [#2] Marschmallow: „Má se ten obrázek zdeformovat (i to je řešení)?“ áno, môže pomôcť vlastnosť background-size#roztazeni. |
||
| sitole Profil |
#4 · Zasláno: 5. 12. 2014, 19:58:24
Použil jsem tedy kod
<style>
.roztahnout-cele {background-size: 100% 100%}
.roztahnout-sirku {background-size: 100%}
.roztahnout-vysku {background-size: auto 100%}
.roztahnout-cover {background-size: cover}
.roztahnout-contain {background-size: contain}
</style>
<div id="roztahnout" style="background-image: url(http://jirkas.tk/airsoft/mapa-a/img/mapa.jpg); background-repeat: no-repeat; height: 100px">
</div>A nic.. VIZ http://jirkas.tk/airsoft/mapa-a/ |
||
| Tomáš123 Profil |
„.“... „id“
V CSS definuješ triedy, v HTML idéčka. |
||
| Trejpa Profil |
#6 · Zasláno: 5. 12. 2014, 20:44:46
sitole:
Použij třídu a její správný název, ten který se ti hodí. Samozřejmě tohle nefunguje ve starých prohlížečích. <style>
.roztahnout-cele {background-size: 100% 100%}
.roztahnout-sirku {background-size: 100%}
.roztahnout-vysku {background-size: auto 100%}
.roztahnout-cover {background-size: cover}
.roztahnout-contain {background-size: contain}
</style>
<div class="roztahnout-cover" style="background-image: url(http://jirkas.tk/airsoft/mapa-a/img/mapa.jpg); background-repeat: no-repeat; height: 100px">
</div> |
||
| sitole Profil |
#7 · Zasláno: 5. 12. 2014, 21:08:14
A stále nefunguje :D
|
||
| Trejpa Profil |
#8 · Zasláno: 5. 12. 2014, 21:48:20
sitole:
Ale funguje. Navrhl jsem cover, protože nedeformuje obrázek - vyplní prostor a přečnívající obrázek ořízne (zde výšku). To, co zbude, je v tomhle případě bílá část obrázku na bílém pozadí. Kdybys použil třeba třídu roztahnout-cele, tak uvidíš celý obrázek a v závislosti na šířce okna krásně deformovaný. Zvyš si výšku (třeba height: 500px) a použij jinou třídu, experimentuj.
Pro úplnost, značka pro styly <style> patří do hlavičky <head>.
|
||
| Marschmallow Profil |
#9 · Zasláno: 5. 12. 2014, 22:05:23
sitole:
Živá ukázka. |
||
| sitole Profil |
Stejnak tam ten obrázek nemám celý..
Nevadí děkuji problém jsem vyřešil jinak :) Moderátor jenikkozak: Prosím, nezamykej tu na Diskusi vlákna. Vždyť všechna ostatní taky zamčená nejsou.
|
||
| jenikkozak Profil |
#11 · Zasláno: 5. 12. 2014, 23:02:11
Jak jsi jej vyřešil?
|
||
| sitole Profil |
Není to pozadí ale jen obrázek. A myslímže se stránka celkem povedla..
VIZ http://jirkas.tk/airsoft/mapa-a/ + Obrázek bude graficky lépe upraven (když bude čas) |
||
|
Časová prodleva: 12 let
|
|||
0