CSS "attachment: fixed" funkar ej på mobil

Trädvy Permalänk
Medlem
Plats
Varberg
Registrerad
Nov 2012

CSS "attachment: fixed" funkar ej på mobil

Hej!

Har kommit till ett problem med min hemsida jag gör. Jag får inte "background-attachment: fixed !important;" att fungera på mobilen.
Jag är ganska ny inom CSS så vet inte vad detta kallas:

@media screen and (max-width: 840px) { body { background-color: #FFFFFF; background-image: -moz-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/sasbgalt.jpg"); background-image: -webkit-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/sasbgalt.jpg"); background-image: -ms-linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/sasbgalt.jpg"); background-image: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)), url("../../images/sasbgalt.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; background-attachment: fixed !important; font-size: 14pt;

Men en sådan har jag för att få det rätt på mindre skärmar. Men det fungerar ändå inte med att få bakgrunden stilla men innehållet på sidan scrollas. Har inte heller hittat något som fungerat från google. Hade samma problem på datorn men då hjälpte "!important" vilket det inte har gjort här.

Är som sagt ny på CSS så felet är säkert jättelätt så vore snällt om någon visade det!

Tack!

RPi2 gaming

Trädvy Permalänk
Medlem
Registrerad
Okt 2004

hmm varför använda attachment?

och mobil brukar vara 480px

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

Är cache rensat?
Testat så att det fungerar i datorns webbläsare under 840px?

DU har väl stängt media-queryn? Ser att du uteslutit det i kodsnutten du visar.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Stockholm
Registrerad
Jun 2004

Är mobilen en iPhone? Så fungerar inte background-attachment: fixed;

Trädvy Permalänk
Medlem
Registrerad
Okt 2004
Skrivet av -=*ThE_cRoW*=-:

Är mobilen en iPhone? Så fungerar inte background-attachment: fixed;

Helt rätt, man får köra position: fixed;

Trädvy Permalänk
Medlem
Plats
Varberg
Registrerad
Nov 2012
Skrivet av gilfoyle:

hmm varför använda attachment?

och mobil brukar vara 480px

Vad ska jag använda istället? Har tagit CSS-filen från en template och ändrat det som behövts.

Skrivet av Florrpan:

Är cache rensat?
Testat så att det fungerar i datorns webbläsare under 840px?

DU har väl stängt media-queryn? Ser att du uteslutit det i kodsnutten du visar.

Rensar cache varje gång jag uppdaterar för att kolla om allt funkar.
Testar i Chrome -> F12 -> Sen ändrar jag device och uppdaterar. Där funkar det med alla olika mobiler och storlekar men inte på min iphone eller android.

Hur stänger jag den? Med en "}"? Isf har jag stängt den. Allt är som sagt från ett template som fungerade (hade dock inte "fixed" från början) men som jag har ändrat själv i som jag velat ha det.

Skrivet av -=*ThE_cRoW*=-:

Är mobilen en iPhone? Så fungerar inte background-attachment: fixed;

Ja iPhone men fungerar inte på en OnePlus3 heller.

Skrivet av gilfoyle:

Helt rätt, man får köra position: fixed;

Hur gör jag det? Läste om det och att man skulle lägga till det någon annanstans i CSS-filen men löste aldrig det.

RPi2 gaming

Trädvy Permalänk
Medlem
Registrerad
Okt 2004

alltså du får byta ut "background-attachment: fixed !important;"

med "position: fixed !important;"

kan du länka sidan så kan jag få kolla?

Trädvy Permalänk
Medlem
Plats
Varberg
Registrerad
Nov 2012

@gilfoyle:
Funkade inte med "position: fixed !important;". På mobilen blev det istället bakgrunden som scrollades och på datorn syntes bara övre halvan av sidan och inget gick att scrolla samt att allt blev "ocentrerat".

Här är sidan. Vore jättesnällt om du ville kolla på den!

RPi2 gaming

Trädvy Permalänk
Medlem
Registrerad
Okt 2004
Skrivet av Anglaborg:

@gilfoyle:
Funkade inte med "position: fixed !important;". På mobilen blev det istället bakgrunden som scrollades och på datorn syntes bara övre halvan av sidan och inget gick att scrolla samt att allt blev "ocentrerat".

Här är sidan. Vore jättesnällt om du ville kolla på den!

men om du tar bort hela bodyn under @media screen and (max-width: 840px), ser det väl ok ut?

Trädvy Permalänk
Medlem
Plats
Varberg
Registrerad
Nov 2012

@gilfoyle:
Märkte ingen skillnad. Fortfarande så att bilden är inzoomad och scrollas med på mobilen... :/
Det har funkat nästan alla olika lösningar jag har gjort i chromes utvecklingsverktyg dock.

RPi2 gaming