Autor Zpráva
sitole
Profil
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
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
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
A stále nefunguje :D
Trejpa
Profil
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
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
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)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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