Avatar billede tjacob Juniormester
08. november 2007 - 16:36 Der er 5 kommentarer og
1 løsning

Baggrundsbilleder til forskellige opløsninger

Udgangspunkt: Jeg vil have en baggrund på siden der er en gradient fra top til bund.

Jeg har lavet et png der er 1 pixel bred og 1024 høj (jeg kører selv med 1280x1024), som så bliver repeated. -Findes der bedre måder at gøre det på?

Men det kan jo komme til at se lidt dumt ud, især hos brugere med større vertikal opløsning.

Jeg formoder løsningen er at lave forskellige størrelse png'er for (et eller andet acceptabelt antal) forskellige højder, og så loade det rigtige efter brugers opløsning. Hvordan gøres dette? (i HTML/CSS eller script -ikke asp ol.)

Det skal naturligvis helst være kompatibelt med de mest anvendte browsere.

/tjacob
Avatar billede roenving Novice
09. november 2007 - 03:06 #1
Tjah, jeg ville simpelthen sætte en generel baggrundsfarve, der var naturlig i forhold til slutningen af gradienten, så den udfyldte, hvis højden var større end baggrundsbilledet ...

-- og med allehånde små devices, der kan vise internet-sider, bliver det jo ganske mange forskellige gradienter, der skal genereres, så medmindre det var mission-critical (hvilket jeg simpelthen ikke er i stand til at forestille mig !-), ville jeg vælge en grund-højde (f.eks. xvga, dvs. 768px), og så lave en gradient, der var pæn, når den fortsatte med en fast baggrundsfarve !o]
Avatar billede tjacob Juniormester
09. november 2007 - 09:55 #2
Ja, jeg er sådan set også selv nået til den samme konklusion. Det andet er alligevel for besværligt.

Men så mange behøver det nu ikke være. Jeg har vedtaget at det ikke gør noget hvis gradienten bliver skåret af (op til: skal vi sige 1/4). Det betyder at jeg blot skulle lave baggrunde med f.eks. 200px spring, og så loade den mindste baggrund der er større end højden på opløsningen. Alle de 'små devices' du nævner, er irrelevante for mig: Siden skal laves til PC, færdig! ;)

Men selvom jeg nok ender med at gøre som du foreslog, så er jeg stadig interesseret i at vide hvordan man aflæser brugers skærmopløsning, og derudfra loader et baggrundspic.
Avatar billede roenving Novice
09. november 2007 - 15:28 #3
-- skærmopløsningen aflæses via screen.height/width, brug dog hellere screen.availHeight/Width (som fratrækker plads brugt af systemet, f.eks. taskbar !-)

-- men det er vel brugerens vnduesstørrelse, der er vigtig, for specielt når man kommer op i større opløsninger bliver det brugt at have vinduer side om side ...

var skaermhoejde = window.innerHeight ? window.innerHeight : window.documentElement ? window.documentElement.clientHeight : document.body.clientHeight;

-- hrm, ikke slået op, så du skal nok lige teste ordentligt ...
Avatar billede tjacob Juniormester
09. november 2007 - 16:58 #4
OK, jeg vil eksperimentere lidt med nævnte muligheder; nu har jeg også noget at Google på.

Hvad så med at loade baggrundspic dynamisk?

Hvis du kommer igen roenving, så læg den næste som et svar, og: Tak for hjælpen.
Avatar billede roenving Novice
09. november 2007 - 17:01 #5
Der er ingen specielle poblemer i at sætte baggrundsbilleder dynamisk, men det kan dog give lidt forsinkelse, da hele dokument-elementet skal være loadet, før man kan ændre style-properties på det !-)

Velbekomme '-)
Avatar billede tjacob Juniormester
09. november 2007 - 17:17 #6
Ja, din sidste kommentar havde jeg heller ikke tænkt på (med forsinkelsen).
Så det bliver som i din første kommentar.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester