Archief - Foto als achtergrond

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
D

Dubbelpunt

Legacy Member
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/2008/148/c/3/Wood_floor_by_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? :woohoo:
P

Pjken007

Legacy Member
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...
D

Dieterg

Legacy Member
Dubbelpunt zei:
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/2008/148/c/3/Wood_floor_by_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? :woohoo:
Klik om te vergroten...

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/0B5L8KIURhINxMWZrQkE4ejgzRnM

Je kan de foto nog wat aanpassen, je moet gewoon zien dat de onderkant en de bovekant gelijk zijn :P
W

W0utR

Legacy Member
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.
b

bealzebub

Legacy Member
Javascript scaling is echt nie ideaal, ge merkt dat echt wel bij het vergroten van de pagina (latency tussen resizing en event firing).

Code: 
body {
  background-image: url('woodfloor.jpg');
  background-size: cover;
}

Die cover zal je image proportioneel scalen en zorgen dat ie de ganse achtergrond bedekt (in tegenstelling tot "contain" waar je randen zou hebben).

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 ;)
D

Dubbelpunt

Legacy Member
Seamless is de oplossing voor mijn probleem. Alweer iets bijgeleerd :)
W

W0utR

Legacy Member
bealzebub zei:
Javascript scaling is echt nie ideaal, ge merkt dat echt wel bij het vergroten van de pagina (latency tussen resizing en event firing).

Code: 
body {
  background-image: url('woodfloor.jpg');
  background-size: cover;
}

Die cover zal je image proportioneel scalen en zorgen dat ie de ganse achtergrond bedekt (in tegenstelling tot "contain" waar je randen zou hebben).
Klik om te vergroten...

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

bealzebub

Legacy Member
W0utR zei:
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.
Klik om te vergroten...

Dimensies behouden en volledig vullen = cover
Dimensies behouden en zorgen dat image volledig zichtbaar is = contain

Centreren: background-position

W0utR zei:
Werkt die background-size: cover niet enkel vanaf IE8 ofzo?
Klik om te vergroten...

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 ;-)
W

W0utR

Legacy Member
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.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan