Tło wersja mobilna 
Autor: Łukasz M.
Visited 936,
Followers 1,
Udostępniony 0
Witam.
Mam problem z listą obrazów w tle pokazuje się tylko mały kawałek tła, w wersji na urządzenia mobilne jest to nie do przyjęcia.
Problem jest tej samej natury, co w tych wątkach:
https://helpcenter.websitex5.com/pl/post/199496
https://helpcenter.websitex5.com/pl/post/211487
Chciałem zrobić to poprzez kod dla każdego zdjęcia, a jest ich cztery w tle i się zmieniają:
<style>
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{
background: transparent url('/images/foto tła.jpg') no-repeat center top;
background-size: cover;
}
}
</style>
w sekcji 3 - Map | Expert | Before closing the HEAD tag
Jednak problem nie został rozwiązany.
Jakieś sugestie?
Posted on the
... LINK ...?...
.
Autor
Strona nie wisi na serwerze bo jest problem, nie wyślę takiego czegoś:
To jest normalny obraz:
tak powinno być jak na pełnym ekranie.
Chcę uzyskać taki efekt jak na tych stronach:
http://www.djlux.tv/
https://www.alex-cosmetic.com/
Na tych stronach zdjęcie jest takie samo czy to na komputerze czy na telefonie.
Kolega Mini z tego wątku
https://helpcenter.websitex5.com/pl/post/211487
podał kod
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{
background: transparent url('/images/twoje nowe foto tła ') no-repeat center top;
background-size: cover;
}
}
Ale ten kod nie działa mi ani na pojedyńczy obraz ani na listę obrazów w tle.
Nie chcę ustawiać objektu "galeria obrazów" bowiem gdy to zrobię to na zdjęcię nie "nałożę" już żadnego innego elementu na przykład "button".
Potrzebuję mieć to w tle.
Nie mogę wręcz uwierzyć, że z tak prostym działaniem jest tyle problemów i trzeba wklejać specjalne kody. Nie rozumiem dlaczego WSX5 automatycznie nie skaluje obrazów w tle do rozdzielczości na przykład telefonu komórkowego...
Hallo Łukasz M.
Deswegen verwende ich FilZilla, damit kann ich Problemlos einen kompletten Test-Ordner auf den Server Legen.
Somit können andere im Quellcoden nachsehen wo der Fehler sein könnte.
Witaj Łukasz M.
Dlatego używam FilZilla, więc mogę łatwo umieścić kompletny folder testowy na serwerze.
W ten sposób inni mogą zajrzeć do kodu źródłowego, w którym może wystąpić błąd.
(It > Pl) ... problem zależy od niektórych przeglądarek, a nie od programu ...
... przepraszam, za kod zdarzenia EXTRA bez LINK Twojej strony lub jednego z przykładów online, nie mogę ocenić, i więc wrócę tylko wtedy, gdy go położysz ...
... jednak czeka na Klaus, który jest już ekspertem w tej dziedzinie, lub czeka na STAFF ...
.
cześć, ciao .
.
.
Autor
Klaus & KolAsim
Napiszę najprościej jak to możliwe. Być może tłumacz Google niezbyt precyzyjnie to tłumaczy.
Jaki kod jest potrzebny i gdzie go wkleić aby uzyskać tło w pełni widoczne na telefonie komórkowym? Probowałem rozwiązań z tych tematów:
https://helpcenter.websitex5.com/pl/post/199496
https://helpcenter.websitex5.com/pl/post/211487
Jednak problem nie został rozwiązany.
Napiszę raz jeszcze, tutaj Kolega Mini M. rozwiązał to kodem
<style>
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{
background: transparent url('/images/foto tła.jpg') no-repeat center top;
background-size: cover;
}
}
</style>
w sekcji 3 - Map | Expert | Before closing the HEAD tag
dla strony www.djlux.tv
Mini M. napisał:
"Ja robie zawsze 2 tła
1 w wersji komputer
2 w wersji mobilnej
Wtedy mogę dostosować fragment wielkość tła na telefonach, aby było dobrze widoczne.
widać to na mojej www www.djlux.tv
Załatwia to wklejenie kodu z podmianą fotki tła:
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{
background: transparent url('/images/twoje nowe foto tła ') no-repeat center top;
background-size: cover;
}
}"
... może nie zrozumiałem ...
... strona www.djlux.tv ma już kod EXTRA ...
... na moim smartfonie / Androidzie tapeta działa dobrze, css "fixed" i obraz jest zastępowany.
desktop >> http://www.djlux.tv/images/djlux-1-1.png
smartphone >> http://www.djlux.tv/images/djlux-1-1-720.png
.
Autor
KolAsim mogę sobię zdjęcia przerobić. Chodzi mi o kod. Możesz mi go podać i gdzie go wkleić?
Stronę www.djlux.tv podałem jako przykład bo właśnie o to mi chodzi. Żeby tak się wyśmietlały zdjęcia na smartfonie - w całości. Wersja desktopowa jest ok.
>> Krok 3 - Mapa > Okno Właściwości strony > Opcje na karcie Zaawansowane | ▪Kod niestandardowy | >>Przed tagiem zamykającym sekcję HEAD
... code:
<style>#imPageRowGraphics_1{position:fixed;}
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{ background: transparent url('/images/djlux-1-1-720.png') no-repeat center top;
background-size: cover;}}</style>
.
Autor
Widzę, że Twój kod jest nieco inny:
<style>#imPageRowGraphics_1{position:fixed;}
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{ background: transparent url('/images/djlux-1-1-720.png') no-repeat center top;
background-size: cover;}}</style>
-------------
@media screen and (max-width: 719px) and (min-width: 320px){
#imPageRowGraphics_1{
background: transparent url('/images/twoje nowe foto tła ') no-repeat center top;
background-size: cover;
}
}"
Popróbuję dziś i jutro dam Ci znać czy jest ok
A i jeszcze jedno, z tego co widzę te dwa zdjecia są zmodyfikowane jak gdyby to na smartfon jest wyśrodkowane.
i widać jego środek.
Rzuć okiem proszę na to czarno-białe zdjęcie na tej stronie ono jest praktycznie takie samo i na komputerze i na smartfonie:
https://www.alex-cosmetic.com/
... no! ... >> www.djlux.tv ... code >> Ctrl+U ...
.
Autor
KolAsim powiedz mi czy jak wrzucę to zdjęcie 720 do katalogu previev/images to po opublikowaniu będzie w porządku?
... folder podglądu nie ma nic wspólnego z ...
... możesz dołączyć obraz „NazwaObrazu.jpg” do projektu, pozostawiając „files” jako proponowany folder domyślny, więc ścieżka do obrazu będzie:
files/NazwaObrazu.jpg
.
Autor
Dzięki KolAsim za odpowiedzi. I dziękuję za wyrozumiałość. Spróbuję tak zrobić i dam znać
Autor
Próbowałem tego w różnych wariantach. Może opiszę:
1. wkleiłem kod, który podałeś
2. Umieściłem plik w sekcji 1 - Statystyki, optymalizacja, SEO, kod
i dalej mam takie tło:
Próbowałem wkleić też ten kod do sekcji 1 - Statystyki, optymalizacja, SEO, kod - Before closing the HEAD tag
Jednak problem dalej występuje.
(It > Pl) ... strona w sieci nie jest aktualizowana.
... Nadal widzę stary kod ze starymi obrazami.
... ten obraz nie został znaleziony: http://www.djlux.tv/files/djlux-1-1-720.png
... unikaj używania plików .png, ponieważ są zbyt ciężkie, sześć razy więcej niż pliki .jpg
.
Autor
A na którą stronę Ty wchodzisz?
Bo strona djlux.tv to stroną, którą podałem dla przykładu.
Autor
W załączniku kod strony
... jak powiedziałem wcześniej:
... za kod zdarzenia EXTRA bez LINK Twojej strony, nie mogę ocenić...
.
Autor
KolAsim w porzednim poście zamieściłem załącznik z plikiem .txt z całym kodem strony
... niestety dla mnie nie wystarczy, jeśli chcesz uzyskać pomoc w EXTRA;
... stwórz uproszczony i opublikowany przykład w sieci i umieść link ...
... w przeciwnym razie korzystaj z normalnych funkcji programu ...
.
Autor
Opublikowałem.
http://trident-stomatologia.com/
... to nie jest obraz tła, ale pokaz slajdów w tle, inny temat.
... użyte obrazy są zbyt duże i zbyt ciężkie.
... używaj obrazów o szerokości mniejszej niż 1900 pikseli i maksymalnej wadze poniżej 500-300 KB.
... zamień obrazy na najbardziej odpowiednie i mniej ciężkie, a następnie spróbuj tego kodu:
<style>
#imPageRowGraphics_1_0 , #imPageRowGraphics_1_1 , #imPageRowGraphics_1_2 , #imPageRowGraphics_1_3 { position:fixed;}
</style>
.
...!... tymczasowo możesz wypróbować ten kod z różnymi obrazami:
<style>
#imPageRowGraphics_1_0 { position:fixed; background: transparent url('https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg') no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_1 { position:fixed; background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/10/42/luggage-2020548__340.jpg') no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_2 { position:fixed; background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/09/19/wintry-2020397__340.jpg')no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_3 { position:fixed; background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/10/42/luggage-2020548__340.jpg') no-repeat center center;background-size: cover;}
</style>
.
Autor
KolAsim pisałem, że to slider.
Powiedz mi proszę, czy da się to jakoś zrobić żeby ten slider był normalnie widoczny na smartfonach? Mogę te zdjęcia jakoś zmodyfikować do odpowiedniej rozdzielczości i jakimś kodem podmienić ten slider na smartfonach. Jak myślisz?
Co do Twoich obrazów, to działa jak wkleję kod. Ale zdjęcia są bardzo złej jakości i nie wyglada to dobrze.
Zmiana tych zdjęć też nie jest dla mnie dobrym rozwiązaniem muszą zostać te które są.
Ewentualnie, mogę ostatecznie zamienić ten slider na jedno zdjęcie na urządzeniach mobilnych. Na komputerze musi zostać slider z tymi właśnie zdjęciami.
Jakieś pomysły?
Autor
Zauważ, jak wrzucę dokładnie te same zdjęcia w obiekcie "obraz" lub "galeria obrazów" to po zmianie widoków automatycznie zdjęcia się zmniejszają. Nie rozumiem dlaczego się tak nie dzieje z tłem.
... moje obrazy są małe i tylko test jako przykład ...
... musisz zamienić swoje zdjęcia na najwłaściwsze, jak powiedziałem wcześniej, i na pierwszy kod ...
.
... x mobile <<< -720 px:
<style>
@media (max-width: 719px) {
#imPageRowGraphics_1_0 , #imPageRowGraphics_1_1 , #imPageRowGraphics_1_2 , #imPageRowGraphics_1_3 { position:fixed;}
#imPageRowGraphics_1_0 { background: transparent url('https://cdn.pixabay.com/photo/2017/01/31/22/55/bank-2027944__340.jpg') no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_1 { background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/10/42/luggage-2020548__340.jpg') no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_2 { background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/09/19/wintry-2020397__340.jpg')no-repeat center center;background-size: cover;}
#imPageRowGraphics_1_3 { background: transparent url('https://cdn.pixabay.com/photo/2017/01/30/10/42/luggage-2020548__340.jpg') no-repeat center center;background-size: cover;}
}
</style>
.