Stretched background image in your MySpace profile

Stretched background image in your MySpace profile

Niedziela, 8 marca 2009

Wiele osób spędza dużo czasu dostosowując swój profil na MySpace. To może być świetna zabawa. Jednym z powtarzających się często zadawanych pytań jest to, jak uzyskać rozciągnięty obraz tła w profilu. Zbadałem to trochę i znalazłem kilka rozwiązań. Żadne z nich nie są niestety w pełni idealne, ale mogą być wystarczające dla Ciebie.

zauważ, że problem rozciągniętego tła nie jest ograniczony do stron MySpace. Jest to ogólny problem dla wszystkich stron internetowych. Nie ma naprawdę dobrego rozwiązania tego dzisiaj (wiosna 2009). Będziemy musieli poczekać na obsługę właściwości CSS3 background-size. Jeśli masz pełną kontrolę nad stroną (której nie jesteś w profilach MySpace), to są obejścia, zobacz np. About.com.

wszystkie poniższe opisy zakładają, że używasz profilu MySpace 2.0.

rozwiązanie 1: Użyj dużego obrazu tła

Użyj obrazu tła, który jest wystarczająco duży, aby wypełnić całe tło na większości monitorów.

zalety

• dość łatwe

wady

• nigdy nie będziesz nigdy, jak duży jest monitor widzów, więc obraz może i tak nie być wystarczająco duży. Jeśli zdecydujesz się na 1920×1200, będziesz przynajmniej pokrywać obecne duże monitory panoramiczne.
• innym problemem jest to, że naprawdę chcesz, aby określone części tła były widoczne, więc upewnij się, że znajdują się one w lewym górnym obszarze obrazu.
• ponieważ twoja rozdzielczość obrazu w tle jest zazwyczaj dość duża, nie może być hostowana na wielu popularnych witrynach hostingowych (w tym na samym myspace i np. flickr), ponieważ mają one maksymalny limit rozdzielczości, zwykle około 1027×768. Więc będziesz musiał umieścić obraz w innym miejscu, gdzie rozdzielczość może być większa.
  Wykonaj wyszukiwanie w Google na „image hosting large size”, aby znaleźć strony hostingowe.

jak

1. przesłać wystarczająco duży obraz tła (np.
2. w profilu MySpace Aktywuj profil > Dostosuj profil.
3. Aktywuj Wygląd > Zaawansowana Edycja > Tło.
   • wprowadź adres Url do lokalizacji hostowanego obrazu, np.http://www.yoururl.com/images/myspacebg.jpg
   • upewnij się, że przewijanie ze stroną jest ustawione na nie, a
   • powtórz jest ustawione na nie powtarzać.
4. aktywuj przycisk Podgląd, aby wyświetlić wynik. Jeśli jesteś zadowolony, aktywuj przycisk Publikuj.

Rozwiązanie 2: Wstępne wsparcie dla CSS3

większość przeglądarek dzisiaj (wiosna 2009) nie obsługuje właściwości CSS3 background-size. Gdyby zrobili, wszystkie problemy z rozciągniętym tłem byłyby rozwiązane. Jednak większość przeglądarek korzystających z silnika webkit ma wstępne wsparcie dla tej właściwości. Obejmuje to np. przeglądarki Safari i Chrome.

zalety

• dość łatwo
• można użyć dowolnego rozmiaru obrazu, np. niektórych własnych zdjęć profilowych.
• wykonaj właściwą zmianę rozmiaru rozciągając się na tle. Ale niekoniecznie musi wyglądać dobrze na ultra szerokim monitorze.

wady

• nie działa w przeglądarce Internet Explorer i wielu innych przeglądarkach. Dotyczy to najczęściej używanych przeglądarek, więc jest to ogromna wada.

jak

1. w profilu MySpace Aktywuj profil > Dostosuj profil.
2. Aktywuj wygląd > CSS
3. Wprowadź następujący kod CSS-zamień adres url na lokalizację obrazu:

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

4. aktywuj przycisk Podgląd, aby wyświetlić wynik. Jeśli jesteś zadowolony, aktywuj przycisk Publikuj.

Rozwiązanie 3: wstrzyknięcie elementu Img

ostatnim rozwiązaniem, które ponownie nie jest idealne, jest wstrzyknięcie elementu IMG HTML do profilu, a następnie kontrolowanie jego pozycji na stronie, aby dopasować się do okna przeglądarki.

zalety

• może pracować z dowolną rozdzielczością obrazu, np. obraz z albumów profilu MySpace.

• obrazek przewija się wraz ze stroną, dzięki czemu tło nie jest stałe. Jest to ogromna wada.
• trochę skomplikowane, aby wprowadzić do swojego profilu.

jak

1. w swoim profilu MySpace Aktywuj profil > Edytuj Profil
2. na stronie Edytuj Profil Aktywuj O mnie.
3. w sekcji O mnie wprowadź następujące kody HTML, aby wstrzyknąć element Img, który odnosi się do obrazu tła. Atrybut src powinien odnosić się do obrazu.

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

1. aktywuj przycisk Zapisz zmiany, aby zapisać zmiany.
2. Aktywuj profil > Dostosuj profil
3. Aktywuj wygląd > CSS
4. wprowadź (Dodaj) następujący kod CSS-który zasadniczo ustawi wstrzyknięty obraz (zidentyfikowany przez) tak, aby pasował do tła jako rozciągnięty:

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

5. aktywuj przycisk Podgląd, aby wyświetlić wynik. Jeśli jesteś zadowolony, aktywuj przycisk Publikuj.