1. #1
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)

    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  

  2. #2
    Pjken007's Avatar
    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  

  3. #3
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Thanks. Wat is trouwens de grootste resolutie atm?
    no votes  

  4. #4
    Pjken007's Avatar
    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  

  5. #5
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Quote Originally Posted by Dubbelpunt View Post
    This quote is hidden because you are ignoring this member. Show
    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?
    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 :P
    Last edited by Dieterg; 16-09-2012 at 22:37.
    -
    no votes  

  6. #6
    W0utR's Avatar
    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  

  7. #7
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    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
    no votes  

  8. #8
    Dubbelpunt's Avatar
    Registered
    23/03/09
    Location
    Belgie
    Posts
    5,054
    iTrader
    5 (86%)
    Mentioned
    0 Post(s)
    Seamless is de oplossing voor mijn probleem. Alweer iets bijgeleerd
    no votes  

  9. #9
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    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).
    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  

  10. #10
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by W0utR View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    Dimensies behouden en volledig vullen = cover
    Dimensies behouden en zorgen dat image volledig zichtbaar is = contain

    Centreren: background-position

    Quote Originally Posted by W0utR View Post
    This quote is hidden because you are ignoring this member. Show
    Werkt die background-size: cover niet enkel vanaf IE8 ofzo?
    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  

  11. #11
    W0utR's Avatar
    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  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in