Autor Zpráva
BuGeR
Profil
Dobrý večer.
Mám obrázek :

Hledám nějaký kód který by zobrazil tento obrázek na procenta (5,15,20,25.....)
Prostě aby se zobrazila jen určitá část obrázku..
Nechci to dělat přes WIDTH - protože se ten obrázek nerozdělí, ale zmenší na tu velikost..
Boužel jsem líný to rozdělit ve photoshopu..
Nevím jak to jinak vysvětlit..
Děkuji za případné odpovědi :)
imploder
Profil
BuGeR:
http://www.jakpsatweb.cz/css/background-position.html
Napozicuj si ten obrázek do 250px širokého <div>u jako pozadí bez opakování (background-repeat: no-repeat), dej mu background-position: -100% 0% (resp. 100% 0% pokud se má vysouvat zprava). Pak ho můžeš zleva (resp. zprava) vysouvat tak, že mu budeš přidávat (resp. ubírat) x-ovou souřadnici v background position.
http://www.jakpsatweb.cz/css/background-position.html

<div>, který to bude mít na pozadí, by měl mít nastaveno overflow: hidden, aby část obrázku zalezlá za jeho okraj nebyla vidět.
imploder
Profil
Tak nějak jsem nabyl dojmu (možná mylného), že to bude nějaký progressbar. Pokud se má ukazovat vždycky jenom část obrázku na pevně daném prostoru, jde to udělat změnou pozice pozadí (background-position) taky.
BuGeR
Profil
imploder:
Děkuji za odpověď.
Zkusil jsem to ale buď to nefunguje, nebo jsem to špatně pochopil..
<div width='250px' style='background-repeat: no-repeat;background-position: -80% 20%;overflow: hidden'>
<img src='http://live-fun.cz/upload/394980039510373455.png' />
</div>

Výsledek je zde :
live-fun.cz/test.html
Prostě se nic nestalo..
imploder
Profil
BuGeR:
ten obrázek musí být na pozadí, ne jako obsah <div>u.
background-image: url('394980039510373455.png')

Overflow vypínat nebude nutné, to je pro obsah (spletl jsem to).
<div> samotný může být klidně prázdný.
BuGeR
Profil
Děkuji, ale i tak to nefunguje:(
<div width="250px" style="background-image: url('upload/394980039510373455.png');background-repeat: no-repeat;background-position: -80% 20%;">
</div>

live-fun.cz/test.html
Bubák
Profil
Různá řešení, nejvíce se mi zamlouvá poslední (modrá má jen ilustrační charakter).:
<div style="width: 250px;
height: 20px;
background: blue url('upload/394980039510373455.png') no-repeat -75px 0">
</div>
<div style="width: 500px;
height: 20px;
background: blue url('upload/394980039510373455.png') no-repeat -30% 0">
</div>
<div style="width: 250px;
height: 20px;
background: blue">
<div style="width: 70%;
height: 20px;
background: red url('upload/394980039510373455.png')">
BuGeR
Profil
Děkuji :) moc jsi mi pomohl..

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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