HTML/JS? Zmiana tła strony przy podanej rozdzielczości lub skalowanie jednego obrazu.

pytanie zadane 26 listopada 2019 w HTML i CSS przez andora.js Nowicjusz (170 p.)
zamknięte 27 listopada 2019 przez andora.js

HTML/JS? Zmiana tła strony przy konkretnej rozdzielczości (1920px i 2560px) (I sposób) lub skalowanie jednego obrazu w (1920px i 2560px) (II sposób).

Udało mi się zrobić tym drugim sposobem używając jednego obrazu tylko, że przy rozdzielczości 2560x1440 obraz się rozciąga. Nie ma znaczenia czy obraz jest 2560x1440 czy 1920x1080. Sprawdzałem na obu.

Proszę o pomoc, aby ten obrazek zachował dobre proporcje. Może być tak, że raz czyta obraz 1920x1080, a przy wyższej żeby się zmieniał na drugi obraz. Nie wiem jak do tego dojść.

Mój kod jest zrobiony sposobem II:

<style>
#background {width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1;}
.stretch {width:100%; height:100%;}
</style>

<body>
<div id="background">
    <img src="obraz1.jpg" class="stretch">
</div>
</body>

komentarz zamknięcia: Problem rozwiązany

1 odpowiedź

odpowiedź 26 listopada 2019 przez Zdolny Bywalec (2,600 p.)
wybrane 27 listopada 2019 przez andora.js

Najlepsza

Polecam użyć css background, jeśli będziesz używał <img/> to i tak w css musisz togglować display między jednym a drugim a pobrać i tak musisz oba (chyba że użyjesz picture srcset) Tu masz przykład: https://codepen.io/auto200/pen/OJJeQze

komentarz 26 listopada 2019 przez andora.js Nowicjusz (170 p.)

Dzięki, działa, ale mam problem z:

position:fixed;

Po dodaniu blokuje mi nie tylko tło, ale całą zawartość strony.

Ktoś wie jak to naprawić, by blokowało tylko tło?

komentarz 26 listopada 2019 przez Zdolny Bywalec (2,600 p.)

background-attachment: fixed;

https://codepen.io/auto200/pen/OJJeQze

komentarz 26 listopada 2019 przez andora.js Nowicjusz (170 p.)

Chodziło mi o to aby obraz - tło było niezmienne i podczas scrollowania strony dalej było widoczne. Nie chodzi o umiejscowienie tła w jednym miejscu, a o stałe tło. Scrollując w dół stronę przesuwać ma się jedynie zawartość, a tło ma być niezmienne.

Wiem, że można to zrobić przy użyciu:

position:fixed;

Lecz mam z tym problem, że obraz zostaje u samej góry przwijając w dół, a chcę by było ciągle to samo jako tło, ten sam obraz. Tak jakby tekst spływał po tle, a tło jest niezmienne.