Stretch obrázek na pozadí ve vašem profilu MySpace

Stretch obrázek na pozadí ve vašem profilu MySpace

neděle 8. března 2009

mnoho lidí tráví spoustu času přizpůsobením svého profilu MySpace. Může to být hodně legrace. Jednou z opakujících se často kladených otázek je, jak dosáhnout nataženého obrázku na pozadí v profilu. Trochu jsem to prozkoumal a našel několik řešení. Žádný z nich není bohužel zcela dokonalý, ale mohou být pro vás dost dokonalé.

Všimněte si, že problém s roztaženým pozadím není omezen na stránky MySpace. Jedná se o obecný problém pro všechny webové stránky. Dnes (jaro 2009) to opravdu dobré řešení neexistuje. Budeme si muset počkat na podporu CSS3. Pokud jste sami plně pod kontrolou webové stránky (které nejste v profilech MySpace), pak existují řešení, viz např. About.com.

všechny následující popisy předpokládají, že používáte profil MySpace 2.0.

řešení 1: Použijte velký obrázek na pozadí

použijte obrázek na pozadí, který je dostatečně velký, aby zaplnil celé pozadí na většině monitorů.

výhody

• poměrně snadné

nevýhody

• nikdy nikdy nebudete, jak velký je monitor diváků, takže obraz nemusí být stejně dostatečně velký. Pokud půjdete na 1920×1200, pokryjete alespoň současné velké širokoúhlé monitory.
• dalším problémem je, že opravdu chcete, aby určité části Pozadí byly viditelné, takže se ujistěte, že jsou v levé horní části obrázku.
• protože vaše rozlišení obrázku na pozadí je obvykle poměrně velké, nemůže být hostováno na mnoha populárních webech pro hostování obrázků (To zahrnuje samotný myspace a např. flickr), protože mají maximální limit rozlišení, obvykle asi 1027×768. Takže budete muset hostit obrázek někde jinde, kde může být rozlišení větší.
  Proveďte vyhledávání Google na „image hosting large size“ a najděte hostingové webové stránky.

jak

1. Nahrát dostatečně velký obrázek na pozadí (např.
2. ve svém profilu MySpace aktivujte profil > Přizpůsobte profil.
3. Aktivujte Vzhled > Pokročilé Úpravy > Pozadí.
   • zadejte adresu Url do umístění hostovaného obrázku, např. http://www.yoururl.com/images/myspacebg.jpg
   • ujistěte se, že Scroll with page je nastaven na No a
   • Repeat je nastaven na neopakovat.
4. aktivujte tlačítko Náhled pro zobrazení výsledku. Pokud jste spokojeni, aktivujte tlačítko Publikovat.

řešení 2: Předběžná podpora CSS3

většina prohlížečů dnes (jaro 2009) nepodporuje vlastnost velikosti pozadí CSS3. Kdyby udělali všechny problémy s nataženým zázemím, bylo by to vyřešeno. Nicméně většina prohlížečů používajících webkit Motor má předběžnou podporu pro vlastnost. To se týká např. prohlížečů Safari a Chrome.

výhody

• poměrně snadné
• můžete použít libovolnou velikost obrázku, např.
• proveďte správnou změnu velikosti na pozadí. Ale nemusí nutně vypadat dobře na ultra širokém monitoru.

nevýhody

• nefunguje v aplikaci Internet Explorer a v mnoha dalších prohlížečích. To zahrnuje nejpoužívanější prohlížeče, takže je to obrovská nevýhoda.

jak

1. ve vašem profilu MySpace aktivujte profil > Přizpůsobte profil.
2. aktivujte vzhled > CSS
3. zadejte následující kód CSS-nahraďte adresu url umístěním obrázku:

body { background-image: url(http://www.yoururl.com/images/myspacebg.jpg); x-webkit-background-size:100% 100%;}

4. aktivujte tlačítko Náhled pro zobrazení výsledku. Pokud jste spokojeni, aktivujte tlačítko Publikovat.

Řešení 3: vstříkněte prvek Img

poslední řešení, které opět není dokonalé, je o vložení prvku HTML Img do vašeho profilu a poté ovládejte jeho polohu na stránce tak, aby se vešla do okna prohlížeče.

výhody

• může pracovat s libovolnou velikostí rozlišení obrazu, např.

nevýhody

• obrázek se posouvá se stránkou, takže pozadí není opraveno. To je obrovská nevýhoda.
• trochu složité zavést do svého profilu.

jak

1. ve vašem profilu MySpace aktivovat profil > Upravit profil
2. na stránce Upravit profil aktivovat o mně.
3. v části o mně zadejte následující HTML kódy pro vložení prvku Img, který odkazuje na obrázek na pozadí. Atribut src by měl odkazovat na obrázek.

<img width="100%" src="http://www.yoururl.com/images/myspacebg.jpg"/>

1. aktivujte tlačítko Uložit změny pro uložení změn.
2. Aktivovat profil > přizpůsobit profil
3. aktivovat vzhled > CSS
4. zadejte (přidejte) následující kód CSS-který v podstatě umístí vložený obrázek (identifikovaný) tak, aby se vešel do pozadí jako natažený:

#back{ width: 100%; height: 100%; left: 0px; top: 0px; position: absolute; z-index: -1;} 

5. aktivujte tlačítko Náhled pro zobrazení výsledku. Pokud jste spokojeni, aktivujte tlačítko Publikovat.