• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
931 wizyt
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ź

+1 głos
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.

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

Trzeba zafixować tło na body https://codepen.io/auto200/pen/OJJeQze

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

Dzięki za wszystko yes

Działa enlightened

Podobne pytania

0 głosów
1 odpowiedź 647 wizyt
pytanie zadane 27 lutego 2016 w HTML i CSS przez KamQiX Dyskutant (9,090 p.)
+1 głos
2 odpowiedzi 278 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)
0 głosów
1 odpowiedź 179 wizyt

92,661 zapytań

141,557 odpowiedzi

319,999 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...