Full bakgrunn blir kuttet på mobil?

Har du spørsmål om HTML, CSS eller Javascript, post det her.

Full bakgrunn blir kuttet på mobil?

Innlegg Sony86 » 11.09.2016 16:17

Hei. Jeg prøver å bruke et stort bilde som bakgrunn på en side jeg jobber med. Dette ser utrolig flott ut, og sentrerer seg og blir bra på pc, men på mobil så blir det selvfølgelig klur.

Detter er oppsettet jeg bruker nå:

Kode: Merk alt
body {
   background: url(../design/big_bg2.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
}


Link til siden: http://nerlithere.no/2016/

Kan noen hjelpe meg litt, med å sette riktig css for at dette skal fungere også på mobil? Har prøvd masse rart uten å komme i mål.
Brukerens avatar
Sony86
Medlem
 
Innlegg: 474
Registrert: 19.05.2004 15:56
Bosted: Norge

Re: Full bakgrunn blir kuttet på mobil?

Innlegg khawaga » 12.09.2016 22:24

Her finnes ingen løsning, hverken CSS eller annet. Piksler er piksler. Det beste du kan gjøre er å stryke background:no-repeat og la det reterere nedover. Og hvorfor ikke?

Bruk av bakgrunnsbilder tilhørte den tiden man estimerte at alle besøkende satt på tradisjonelle skjermer. I dag sitter nesten ingen på tradisjonelle skjermer. Bare du og jeg, som drømmer om svunne tider.

I dag bruker nesten ingen bakgrunnsbilder på nett; det måtte være miniatyrer presentert på tile. Og det er forferdelig forstyrrende.

Det er morsomt å eksperimentere med webdesign, men her er du dessverre helt ute å kjøre. Ta bakgrunnsbildet, om det er viktig, og lur det her og der inn i helheten i stedet. I større og mindre format, som thumbnail, banner, ingress, rent icon. Overalt. Men la bakgrunnen være enten hvit eller behagelig lys. Du må tenke litt på de som skal besøke siden, ikke bare deg selv. Faen, her har jeg gått i baret mange ganger.
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4865
Registrert: 30.09.2002 22:34

Re: Full bakgrunn blir kuttet på mobil?

Innlegg nkm » 16.09.2016 22:45

Bakgrunnsbilde er kult. Jeg har laget en side for en entreprenør i Kragerø. Jeg laget den gratis. Det var en interessant og lærerik oppgave. Etter et halvt år sier de nå at de vil bytte til en lokal leverandør (jeg bor ikke i Kragerø) og fornye hjemmesiden. Det må de gjerne gjøre for meg. Jeg hadde det gøy da jeg laget siden. Ta en titt på den mens den enda er "min": http://www.runebrekka.no

Men jeg syntes ikke bakgrunnsbildet ble noe fint på en telefonskjerm. Derfor kutte jeg ut bildet som bakgrunn og la det i toppen istedet. Hele logikken ligger i kildekoden bak siden.
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 889
Registrert: 20.07.2006 23:37
Bosted: Hedmark

Re: Full bakgrunn blir kuttet på mobil?

Innlegg khawaga » 18.09.2016 1:05

Slikt går ikke i dag, nkm. Med de surfedingsene som er rådende per 2016, vil dette være bortimot uleselig, og i beste fall forstyrrende. Å sette bakgrunn position absolute eller fixed bare irriterer den besøkende. Man irriterer ikke sine besøkende, man prøver å tilfredsstille dem. Jeg er ikke flink slik selv, men jeg forklarer det tydelig: jeg er ikke webdesigner lenger. Jeg er historie. Jeg tilhører en tid hvor folk satt på anstendige skjermer, og brukte mus og tastatur. Min tid er over.
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4865
Registrert: 30.09.2002 22:34

Re: Full bakgrunn blir kuttet på mobil?

Innlegg zeriz » 19.09.2016 15:05

Det blir for dumt å si at bakgrunner i fullskjerm ikke går an å bruke i dag.
Det er tusenvis av nettsteder på nettet som bruker fullskjerms bakgrunner og får dette til å funke helt fint, og dèt også responsivt.

http://sixrevisions.com/css/responsive- ... und-image/

På linken ovenfor finner du hvordan man kan gjøre det, og flere gode eksempler på bruk av denne teknikken. :)

Noe man bør tenke på er selvfølgelig selve bildet man bruker, om det faktisk er egnet, og filstørrelse.

Èn teknikk som funker om bildet er for detaljert og tar for mye oppmerksomhet er:

1. Åpne bildet i et nytt Photoshop-dokument.
2. Sett bakgrunnslayeret til svart.
3. Sett ned opacity til kanskje 70-80% på bildet som ligger ovenfor bakgrunnslayeret (kan også gå ned enda mer i opacity).
4. Lagre for web / lagre som .jpg (Kvalitet på 8, evt mer om ikke filstørrelsen påvirkes noe særlig).

Filstørrelsen bør minst være under 0.25 mb
#coffee:after { content: "consumed" ;}
zrzonln @ twitter.com
Brukerens avatar
zeriz
Medlem
 
Innlegg: 749
Registrert: 20.02.2008 2:40
Bosted: Bodø, Nordland

Re: Full bakgrunn blir kuttet på mobil?

Innlegg nkm » 22.09.2016 23:34

Hei, dette var et bra tips, zeriz. Det må jeg prøve ved anledning. Men et slikt bakgrunnsbilde på en telefonskjerm vil vel kreve relativt lite annet innhold på den siden. Det ser vi jo også i eksemplene i artikkelen du linker til. Jeg tror kanskje derfor at det vil gjøre seg best på en førsteside som inneholder linker til sider med mer innhold der en homogen bakgrunnsfarge vil gi bedre lesbarhet. Uansett så satte du meg på et spor av noe jeg har lurt litt på og som jeg bare må prøve når jeg får tid og anledning. Takk!
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 889
Registrert: 20.07.2006 23:37
Bosted: Hedmark

Re: Full bakgrunn blir kuttet på mobil?

Innlegg zeriz » 18.01.2017 11:20

Bare hyggelig, nkm. :-)

Slike bakgrunnsbilder blir best brukt for å fremheve tekstbudskap på en linje eller tre, og er nok som du sier, mest egnet for forsider. Content is King - og det vil det fortsette å være, så på undersider er det da ofte fornuftig å bare bruke elementer/deler av bakgrunnsbilde(ene) som brukes på forsiden. Det bør alltid gjøres en grundig vurdering før man benytter seg av slike typer teknikker, da om hvorvidt det faktisk er hensiktsmessig og om man faktisk klarer å fremme budskapet sitt med det, men nå mener da jeg at stort sett alle valg i forhold til design man foretar seg skal kunne begrunnes strategisk . :-)

Her er en annen lenke med gode eksempler:
http://line25.com/articles/30-web-designs-that-fully-embrace-the-hero-image
#coffee:after { content: "consumed" ;}
zrzonln @ twitter.com
Brukerens avatar
zeriz
Medlem
 
Innlegg: 749
Registrert: 20.02.2008 2:40
Bosted: Bodø, Nordland

Re: Full bakgrunn blir kuttet på mobil?

Innlegg nkm » 29.01.2017 19:58

Meget interessant artikkel den der. Jeg ser en liten detalj i forhold til min CSS på kundesiden jeg refererte til ovenfor og som kanskje er årsaken til at jeg får feil på visning på iPad. Det er riktig nok en iPad2 så kanskje den egentlig er for gammel til å håndtere dette nye. Jeg har uansett tatt vare på min originale side (som faktisk fortsatt er gjeldende hos kunden, de har visst ikke klart å bytte til ny design enda...), så jeg kan eksperimentere med den som jeg vil.

En hovedforskjell er det likevel mellom min side og eksemplet i artikkelen. De fleste sier at man skal designe etter prinsippet "mobile first". Derfor tester jeg i mediaquerien på min-width, slik at ikke en telefonbrowser skal risikere å begynne nedlasing av det store bildet. For meg ser det ut som eksempelet i artikkelen har bommet på akkurat dette, men browserne håndterer det kanskje likevel?
www.nkmoller.com
Jeg skriver aldri mot bedre vitende, men på en del områder kan andre vite mer enn meg. Utfordringen er å bruke egen og andres kunnskaper best mulig for å løse aktuelle oppgaver.
Brukerens avatar
nkm
Medlem
 
Innlegg: 889
Registrert: 20.07.2006 23:37
Bosted: Hedmark


Gå til (X)HTML/CSS/JavaScript/XML m.m.

Hvem er i forumet

Brukere som leser i dette forumet: Ingen registrerte brukere og 14 gjester