WebSite X5Help Center

 
Łukasz M.
Łukasz M.
User

Tło wersja mobilna  pl

Auteur : Łukasz M.
Visité 1153, Followers 1, Partagé 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/fr/post/199496

https://helpcenter.websitex5.com/fr/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?

Posté le
27 RéPONSES - 5 UTILE
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... LINK ...?...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

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/fr/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...

Lire plus
Posté le de Łukasz M.
Klaus G.
Klaus G.
User

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.

Lire plus
Posté le de Klaus G.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Łukasz M.
Strona nie wisi na serwerze bo jest problem, nie wyślę takiego czegoś ... ... ... ... ... 

(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 .
.

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

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/fr/post/199496

https://helpcenter.websitex5.com/fr/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;
}
}"

Lire plus
Posté le de Łukasz M.
Łukasz M.
Łukasz M.
User
Auteur

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.

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

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/

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Łukasz M.
Widzę, że Twój kod jest nieco inny: ... ... ... 

... no! ... >> www.djlux.tv  ... code >> Ctrl+U  ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

KolAsim powiedz mi czy jak wrzucę to zdjęcie 720 do katalogu previev/images to po opublikowaniu będzie w porządku?

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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
.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

Dzięki KolAsim za odpowiedzi. I dziękuję za wyrozumiałość. Spróbuję tak zrobić i dam znać

Lire plus
Posté le de Łukasz M.
Łukasz M.
Łukasz M.
User
Auteur

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. frownfrownfrownfrown

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

(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

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

A na którą stronę Ty wchodzisz?

Bo strona djlux.tv to stroną, którą podałem dla przykładu.

Lire plus
Posté le de Łukasz M.
Łukasz M.
Łukasz M.
User
Auteur

W załączniku kod strony

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... jak powiedziałem wcześniej:

 ‪ KolAsim ‪ ‪
... ... ... 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 ... ... ... 

... za kod zdarzenia EXTRA bez LINK Twojej strony,  nie mogę ocenić...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

KolAsim w porzednim poście zamieściłem załącznik z plikiem .txt z całym kodem strony

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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 ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Łukasz M.

... 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>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

...!... 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>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Łukasz M.
Łukasz M.
User
Auteur

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?

Lire plus
Posté le de Łukasz M.
Łukasz M.
Łukasz M.
User
Auteur

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.

Lire plus
Posté le de Łukasz M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... 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 ...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Łukasz M.
... ...  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. ... ...

... 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>

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪