Forum PHP.pl > [CSS] Stały backgrond niezależny od rozmiaru okna

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Stały backgrond niezależny od rozmiaru okna

Darekxp

4.02.2013, 21:53:23

Witam!

Zastanawia mnie jak wykonać taki background - http://swedishseasons.com/

Niezależnie jaka jest rozdzielczość i oddalenie/przybliżenie w opcjach przeglądarki zdjęcie zachowuje cały czas swoje stałe proporcje.

Za pomoc z góry dzięki:)

zamper

4.02.2013, 22:00:56

To są style diva z tłem
Polecam FireBug'a

[CSS] pobierz, plaintext 
    background: url("images/for-1.jpg") repeat scroll center bottom / 100% auto transparent;
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 100;
[CSS] pobierz, plaintext

Darekxp

4.02.2013, 22:07:58

A zdjęcia jakiej rozdzielczości i wielkości max proponujesz wrzucać ?

ShadowD

4.02.2013, 22:18:10

http://vegas.jaysalvat.com

Polecam i nie raz już polecałem tą bibliotekę tutaj. Jeśli chodzi o wielkość fotek to proponuję fulhd ~1900x1060 sprawdź sobie dokładnie, tylko ogromne wyjątki mają monitory z większą rozdzielczością, a nawet jak ktoś ma większy monitor to upakowanie pixeli jest tak duże, że nie powinno być wielkich strat na jakości.

Dodam że bardzo ważnym jest dobranie odpowiedniego zdjęcia, takiego z brakiem gradientów przechodzących np. z zielonego jasnego w zielony jaśniejszy minimalnie - tak by po zoptymalizowaniu grafiki nie wyszła sieczka lub przeskoki w kolorach, a optymalizacja takiego tła powinna być największa jak to jest możliwe bez znacznej straty na jakości. Mimo że internet 3mb to prawie norma to zdjęcie 3mb będzie się na takim łączu wczytywać 10 sekund, więc sensowną normą było by dojście do wyniku 1/2 mb.

Darekxp

4.02.2013, 23:05:31

Wygląda extra, ale mam problem z instalacją. Poza moją treścią w body są jakieś divy? Bo czytam dokumentację ale tylko js widzę, ale nie trybi.

[HTML] pobierz, plaintext 
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css"/>
<script type="text/javascript">
$( function() {
  $.vegas({
    src:'/images/1.jpg'
  });
  $.vegas('overlay', {
    src:'/overlays/13.png'
  });
});
</script>
</head>
<body>
<p>test</p>
</body>
</html>
[HTML] pobierz, plaintext

ShadowD

4.02.2013, 23:15:57

Js i css tylko, całość pod bodu się podpina.

Zobacz w firebug jak wygląda kod i czy coś się dodało do body, jak nie spróbuj:

[PHP] pobierz, plaintext 
    $.vegas({
    src:'/img/background.jpg',
    valign:'20%', // top, center, bottom or %
    align:'right' // left, center, right or %
    });
[PHP] pobierz, plaintext

I upewnij się czy na pewno podajesz dobre linki do biblioteki i css.

Darekxp

5.02.2013, 22:05:02

ścieżki są ok, patrzę w kod, sprawdzam różne rzeczy, pliki istnieją, ale nadal białe tło...

ShadowD

6.02.2013, 19:16:10

Daj to gdzieś live.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.