Thread: Foto als achtergrond
-
16-09-2012, 16:27 #1
Foto als achtergrond
Wat is een goede oplossing als je een achtergrond als deze wil zodanig dat het mooi is in iedere resolutie?
http://fc01.deviantart.net/fs30/f/20..._gnrbishop.jpg
1. Als ik deze aankoop in de allergrootste resolutie - voor de grote schermen dus - spreken we over een serieuze laadtijd... niet ideaal dus
2. Als ik de bovenste kleine hoek neem, en ik herhaal deze verticaal en horizontaal, dan heb ik natuurlijk niet hetzelfde resultaat als die foto
Bestaat er hier een oplossing voor?
Of is het gewoon kiezen tussen deze 2 mogelijkheden?
no votes
-
-
16-09-2012, 16:48 #2Member
- Registered
- 28/12/07
- Location
- Ninove/Gent
- Posts
- 951
- iTrader
- 15 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
Kan je die foto in grote resolutie niet wat comprimeren (jpg)? Zo'n grote details enz moet die foto toch niet hebben denk ik...
Als je deze websites bekijkt heb je ook altijd grote laadtijden: http://vandelaydesign.com/blog/galle...g-backgrounds/
Dus ik weet niet of er echt een goede oplossing is...no votes
-
16-09-2012, 16:52 #3
Thanks. Wat is trouwens de grootste resolutie atm?
no votes
-
16-09-2012, 17:17 #4Member
- Registered
- 28/12/07
- Location
- Ninove/Gent
- Posts
- 951
- iTrader
- 15 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/8
Geen idee!
Als je geen trage laadtijd wil, kan je mss ook eerst een foto in lage kwaliteit tonen en ondertussen die in deftige kwaliteit op de achtergrond downloaden en laten verschijnen...
Moet wel lukken met JQuery vermoed ik...no votes
-
16-09-2012, 22:27 #5Approved 9-lifer
- Registered
- 08/01/05
- Location
- Turnhout
- Posts
- 1,182
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 9/9
Ik los zo'n probleem als volgt op:
1. Neem een klein stukje uit de foto: bv. 100px op 50px (bv. zodat het juist uitkomt met de naden van de plank)
2. Plak deze foto gespiegeld onder deze foto zodat je 200px verticaal hebt en 50px horizontaal.
3. Nu zou je deze foto moeten kunnen repeaten zonder al te veel problemen te zien. Indien je meer afwisselende patronen wilt vergroot je natuurlijk de pixels in stap 1.
Zoiets als dit dus: https://docs.google.com/file/d/0B5L8...WZrQkE4ejgzRnM
Je kan de foto nog wat aanpassen, je moet gewoon zien dat de onderkant en de bovekant gelijk zijn :PLast edited by Dieterg; 16-09-2012 at 22:37.
-no votes
-
17-09-2012, 05:12 #6Member
- Registered
- 16/04/08
- Location
- Hong Kong
- Posts
- 1,989
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/9
Die foto die je daar hebt kan je toch wat aanpassen zodat het een pattern word, lijkt mij nu niet zo'n probleem.
Anders kan je een simpel javascriptje scrijven (10 regels ofzo) die de foto vergroot wanneer je uw browser resized, via css media queries kan je dan verschillende sizes inladen.no votes
-
17-09-2012, 10:46 #7
Javascript scaling is echt nie ideaal, ge merkt dat echt wel bij het vergroten van de pagina (latency tussen resizing en event firing).
Die cover zal je image proportioneel scalen en zorgen dat ie de ganse achtergrond bedekt (in tegenstelling tot "contain" waar je randen zou hebben).Code:body { background-image: url('woodfloor.jpg'); background-size: cover; }
Maar…
Zoals verschillende andere posters reeds vermeld hebben ga je een veel beter resultaat krijgen met een seamless pattern. Effe googlen op "free seamless wood texture" en je vindt er een groot aantal die al direct mooi afgewerkt zijn en klaar voor gebruik. Hier bijvoorbeeld.
En hou wel er wel degelijk rekening mee dat lange laadtijden echt wel te vermijden zijn. Het is zeker niet omdat een andere site slechte gewoontes heeft dat jij ze ook moet hebben
no votes
-
17-09-2012, 18:58 #8
Seamless is de oplossing voor mijn probleem. Alweer iets bijgeleerd
no votes
-
18-09-2012, 06:10 #9Member
- Registered
- 16/04/08
- Location
- Hong Kong
- Posts
- 1,989
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/9
Via javascript is het idd niet ideaal, maar soms is er niet echt een andere oplossing, zeker als je een afbeelding wilt scalen zodat de dimensies behouden blijft en hij gecentered word ofzo.
Werkt die background-size: cover niet enkel vanaf IE8 ofzo?no votes
-
18-09-2012, 11:36 #10
Dimensies behouden en volledig vullen = cover
Dimensies behouden en zorgen dat image volledig zichtbaar is = contain
Centreren: background-position
Dat is inderdaad de enige gotcha, voor support in IE heb je IE9 nodig. Dan moet je met iets als dit gaan werken om het in pure CSS te doen: stu nicholls | CSS PLaY | 100% wide/high 'background' image emulation
Anyway, kleine seamless texture met background-repeat is veel beter in dit geval en dat is ook waar de OP voor gekozen heeft ;-)no votes
-
18-09-2012, 11:59 #11Member
- Registered
- 16/04/08
- Location
- Hong Kong
- Posts
- 1,989
- iTrader
- 6 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 7/9
Aha, goed om te weten, meestal als we iets met een foto over de volledige achtergrond hebben is het met een slideshow bij, waardoor het meestal met javascript gedaan word.
no votes

