Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z rozmiarem zdjęcia w background-size: cover
Forum PHP.pl > Forum > Przedszkole
trifek
Witam serdecznie,
Tam taki CSS:
  1. .tlo {
  2. background-image: url('../images/tlo.png');
  3. display: inline-block;
  4. line-height: 0;
  5. vertical-align: middle;
  6. background-size: 100%;
  7. background-repeat: no-repeat;
  8. height: 268px;
  9. width: 100%;
  10. background-size: cover;
  11. background-attachment: fixed;
  12.  
  13. }


Chciałbym uzyskać taki efekt jak na stronie: http://tajednachwila.pl (GALERIA) - ruchome tło, przesuwające się wraz z obniżaniem/podwyższaniem strony w przeglądarce...


Powyższy kod nie pokazuje mi pełnowymiarowego tła, tylko powiększony jego element.
Wygląda to tak: http://serwer1356363.home.pl/pub/tlo/
Obrazek: http://serwer1356363.home.pl/pub/tlo/images/kasa.png

Wie ktoś może dlaczego to nie działa?sad.gif

lustfingers
Masz dwa razy background-size więc usuń ten z cover, poza tym działa a fachowo się to nazywa paralax.
trifek
Dzięki za odpowiedź. Tylko dlaczego ten obrazek jest tak rozciągnięty? Fizycznie jest dużo mniejszy....
lustfingers
Usuń ten size i wtedy będzie normalny.
trifek
Cytat(lustfingers @ 19.05.2017, 05:44:10 ) *
Usuń ten size i wtedy będzie normalny.

niestety nie pomogło sad.gif
Puszy
Usunąłeś obydwa? 100% i cover?
mortus
background-size: cover; i background-size: contain; skalują obraz odpowiednio z zachowaniem współczynnika rozmiaru, dlatego w pierwszym przypadku obraz jest rozciągnięty, a w drugim jest zbyt wąski (bądź też niski, jak kto woli). Aby zachować wysokość 268 px przy małych rozdzielczościach ekranu możesz ją po prostu ustawić:
  1. background-size: 100% 268px;

Oczywiście dla większych rozdzielczości css będzie inny.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.