Forum PHP.pl

Witam serdecznie,
Tam taki CSS:

[HTML] pobierz, plaintext 
.tlo {
    background-image: url('../images/tlo.png');
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    background-size: 100%;
    background-repeat: no-repeat;
    height: 268px;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
 
}
[HTML] pobierz, plaintext 

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?

Masz dwa razy background-size więc usuń ten z cover, poza tym działa a fachowo się to nazywa paralax.

Dzięki za odpowiedź. Tylko dlaczego ten obrazek jest tak rozciągnięty? Fizycznie jest dużo mniejszy....

niestety nie pomogło

Usunąłeś obydwa? 100% i cover?

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ć:

[CSS] pobierz, plaintext 
background-size: 100% 268px;
[CSS] pobierz, plaintext 

Oczywiście dla większych rozdzielczości css będzie inny.

Ten post edytował mortus 19.05.2017, 16:55:14