Autor Zpráva
petr
Profil *
jak bylo ve starém vláknu naznačeno
http://diskuse.jakpsatweb.cz/?action=vthread&topic=94164&forum=7&page=-1

nelze automaticky změnit šířku obrázku pozadí třeba DIVu, ale jak jak to teda funguje tady :

http://www.ikea.com/cz/cs/search/?query=gorm

kdy pozadí při najetí na zboží zobrazí "hoover" s rámečkem, který má stín .... originál obrázku pozadí je ale větší /mnohem/ viz. :
http://www.ikea.com/ms/img/popup_shadow.png

dik
Trejpa
Profil
petr:
Tady to funguje tak, že je tam ten obrázek vložen čtyřikrát. Poprvé tvoří pravý dolní roh, spodní a pravou stranu pomocí background-position: right bottom. Ve vnořeném bloku, který je o šířku namalovaného okraje menší (prosvítá vedle a pod ním pozadí z minulého), má pozadí background-position: left top. No a zbývající dva rohy jsou malé bloky napozicované na správné místo.
petr
Profil *
Trejpa:

zajímavé to mě nanapadlo, že to bude taková pakárna :), myslel jsem, že to funguje ala :
background-size:auto auto;
-moz-background-size:auto auto;
-o-background-size:auto auto;

ale to mi právě nefunguje , můžeš mi prosím nej stručně říci v kterém případě to funguje?

díky
Bubák
Profil
Hodnota auto je výchozí, ke změnám velikosti obrázku pozadí nedojde.

Já bych doporučil toto (inline styl jsem pružil jen kvůli zjednodušení příkladu):
<div style="width: 160px; height: 160px;
background: url(http://diskuse.jakpsatweb.cz/img/forum_icons/css.gif);
background-size: 50% 100%;
-moz-background-size: 50% 100%;
-o-background-size: 50% 100%;
-webkit-background-size: 50% 100%;">
</div>

Všechny aktuální verzre (významných) prohlížečů, s výjimkou IE, umí background-size, tedy bez vendor prefixu. Který prohlížeč od které verze vendor prefix nevyžaduje, netuším.
Zajímavost, v nových verzích Opery (netuším přesně od kdy, ale dude to některá z 10.Xx) ve standardním zobrazovacím režimu nefunguje -o-background-size, tedy zápis s vendor prefixem. Proto starší příklady na vlastnost background-size na webu Opery v nových verzích Opery nefungují.

Více se dá najít na na webu, třebas
W3C 3.8. The 'background-size' property
MDC background-size | -moz-background-size, Scaling background images
Opera Developer Community CSS text shadows and background sizing
Spousta dalších stránek...
Chamurappi
Profil
Reaguji na Bubáka:
V Exploreru jde na natažení pozadí použít filtr AlphaImageLoader.
petr
Profil *
diky to je to co jsem myslel a je to pekne prehledne a funguje to

<div style="width:800px; height: 600px;
background: url(http://www.ikea.com/ms/img/popup_shadow.png );
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;">
</div>

Moderátor Str4wberry: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
Moderátor Str4wberry: Vkládej prosím kódy mezi značky [pre] a [/pre] (stačí kliknout na ).
Chamurappi
Profil
Reaguji na petra:
Ale zdaleka ne všem.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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