Fullscreen Background

Status
Niet open voor verdere reacties.
ErikBooy007

ErikBooy007

Terugkerende gebruiker
Lid geworden
24 mei 2007
Berichten
3.814
Goedeavond dames en heren!

Ik vroeg me af of hier iemand ervaring heeft, met fullscreen background voor een webpagina.

Ik had niet gedacht het ooit te willen gebruiken, maar het is toch zover. Ik ben er alleen nog niet helemaal uit wat nou de "best practice" is op dit gebied.

- Ik ben sowieso van plan meerdere versies van de afbeelding te maken (qua grootte), maar op welke groottes?

- En hoe kies ik de versie die moet worden weergegeven? CSS media queries? JavaScript?

- En bij een resize van het scherm, is het dan wenselijk een nieuwe afbeelding met optimale grootte te laden, of de oude gewoon de resizen en iets aan kwaliteit in te boeten?

Ik hoop dat mensen eerder met dit bijltje gehakt hebben, of er in ieder geval over nagedacht hebben, ik niet namelijk ;)

Bij voorbaat dank!
 
Voorlopig ga ik voor de oplossing met een absoluut gepositioneerde image van 1920 * 1200px die ik met CSS op 100% zet.

Met die resolutie kan ik een beetje upscalen en beetje downscalen, zonder dat de kwaliteit er teveel onder te lijden heeft. En het gaat toch al om een afbeelding met een flinke blur, dus het is eigenlijk niet eens te zien.

Als iemand anders een betere oplossing heeft hoor ik het uiteraard graag!

[EDIT]
Afbeelding met Photoshop wel geoptimaliseerd voor 't web. 341kb, netjes toch?
[/EDIT]
 
Laatst bewerkt:
Je zou de afbeelding natuurlijk een min-width en min-height kunnen geven, zo blijft hij toch minimaal zoveel px x px
 
Het punt is dat ik alles wat in de afbeelding voorkomt wel op het scherm wil hebben. Het is een afbeelding van een strand, een palmboom en blauwe lucht (hoe cheesy klinkt dat, I know) en als ik een min-width of min-height opgeef, kan er wel eens wat van die afbeelding verdwijnen.
 
Dit ben ik op het Internet tegen gekomen met deze code moet een afbeelding volledig in beeld komen.
Via de demo zie ik de afbeelding toch op 1920*1280

Code: 
html {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
 
Die eigenschap kende ik nog niet, thanks! Maar het is voor mijn doel niet nodig dat de verhoudingen behouden blijven, dat is zo te zien wel wat "background-size: cover" doet.

Wat eigenlijk m'n grootste probleem is nu, is dat ik graag een afbeelding wil laden die "past" bij het scherm. Niet te groot omdat dat onnodige bandbreedte (laadtijd) kost en niet te klein, vanwege de kwaliteit.
 
Well, er zijn maar 2 manieren om aan de grootte van het scherm te komen. De eerste is (obviously) Javascript, maar volgens mij kon je met CSS van die magische viewport dingetjes doen: zie hier de draft (dus ja, media queries).

Het punt is dat achtergrondplaatjes stijl zijn, en stijl in CSS hoort. Dus als we het over 'best practice' hebben, en tenzij je iets bouwt waar zowiezo Javascript voor nodig is, kan je beter voor CSS gaan, Eg:

PHP: 
/* CSS */

@media screen and (max-width: 600px)
{
  background: #fff url(plaatje_600px.jpg) no-repeat center center fixed;
}

@media screen and (max-width: 800px)
{
  background: #fff url(plaatje_800px.jpg) no-repeat center center fixed;
}

Voor handhelds kan je dan geen plaatje / kleiner plaatje doen oid, sinds handhelds een ander 'media' type hebben. Ofzo.


Support van deze dingen weet ik niet; CSS is niet echt mijn... specialiteit ;) Maargoed, van zelf wat research/testen ben je nooit dood gegaan.



:thumb:


[edit]
341kb, netjes toch?
Klik om te vergroten...
voor een desktop misschien wel; als ik echter op mn Android zit wil ik geen overbodige plaatjes moeten downloaden met ~50 kb/sec.... maargoed, vandaar probably je vraag ;)[/edit]
 
Laatst bewerkt:
Ik ga eens uitzoeken in hoeverre dat nu ondersteund wordt. M'n huidige projectje vereist (in tegenstelling tot de vorige) geen IE6 support, dus dat scheelt in ieder geval vast.

En nee, van zelf proberen ben ik (nog) nooit doodgegaan ;) Maar wellicht hebben de forumbezoekers ideeën waar ik ook met zelf proberen niet op zou zijn gekomen.
 
En voor wat betreft je edit, ja dat is mainly het doel van m'n vraag. De load zo klein mogelijk houden.
 
Nog even voortborduren op dit probleempje. Uiteindelijk de afbeelding gewoon als achtergrond ingesteld middels CSS, alleen levert dit een verre van mooi resultaat op op m'n iPad, vanwege het feit dat een fixed background daar niet werkt. Daar heb ik toen toch gekozen voor het gebruik van

Code: 
-webkit-background-size: cover;

Dat werkt perfect!

Alleen update ik content op m'n pagina dynamisch (JS) en als de pagina dan langer wordt, dan schaalt de afbeelding niet opnieuw, maar wordt gewoon herhaald. ***** Safari op iOS ;)

Enige tips over hoe ik dat nog kan overkomen?
 
Laatst bewerkt:
Eh, iets van

PHP: 
/* CSS */

background-attachment: fixed;

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Klik om te vergroten...

denk ik? Of zou dat samen met cover niet werken?
 
Fixed bestaat niet op mobiele apparaten. Daar schuif je bij scrollen eigenlijk gewoon de complete viewport naar boven (beetje paradoxaal, I know). Anders was er geen enkel probleem. Fixed is daar praktisch gezien hetzelfde als absolute;
 
Ik heb een mogelijkheid gevonden, maar het is wel een hele lelijke :P

Middels browserdetectie bekijken of de website toevallig op een iPad wordt weergegeven. De afbeelding weer als absoluut gepositioneerde afbeelding achter de rest van de pagina en dan bij elke content update, de offsetHeight van <html> bepalen en de hoogte van de achtergrond daarop instellen. Lelijke code? Ja! Mooi resultaat? Ja!
 
Hoi Erik,
Of zou je misschien na het ophalen van de dynamische content de background kunnen resetten?
[JS]function newContent {
// ... wat daarvoor moet gebeuren
var rescale = document.getElementById('waarjeBGzit');
rescale.style.-webkit-background-size = 'cover';
}[/JS]
 
Goeie! Ik had dat al geprobeerd, maar ik dacht: streepjes in een CSS-eigenschap worden hoofdletters in javascript (margin-top => marginTop)... Blijkbaar is dat hierbij niet zo ;)

Heb het nu zo gedaan:

[JS]
$('html').css({-webkit-background-size: 'cover'});
[/JS]

[EDIT]
Dat werkt helemaal niet ;) M'n eigen JS fallback had me te pakken. Ik heb het zo geprogrammeerd, dat wanneer JS uitstaat, de links als normale links werken die middels een $_GET de juiste pagina tonen. De bovenstaande code laat de JS engine blijkbaar stoppen en dan zijn het weer normale links ;) En dan wordt gewoon bij de pageload weer de grootte van de afbeelding bepaald. Thuis op het netwerk is een pageload alleen zo snel, dat ik het verschil niet zag tussen een dynamische load of een hele verversing. Tot ik de statusbalk bekeek ;)
[/EDIT]
 
Laatst bewerkt:
Ja, ik denk dat toch het eerste streepje hier de das om doet.
Heb nog geprobeerd: rescale.style.-webkit-backgroundSize = 'cover'; maar dat blijkt ook niet de juiste formule te zijn. Ook rescale.style.-webkitBackgroundSize = 'cover'; werkt niet. Weglaten eerste streepje: eveneens nul,poffertje. :confused:
Maar heb je al gedaan:
[JS]var rescale = document.getElementById('waarDeBGzit');
rescale.setAttribute("style", "-webkit-background-size: cover");[/JS]
Die werkt bij mij in Chrome:
Ook als je 'm zonder "cover" laat starten:
Dus dat geeft goede hoop.
Maar Chrome is geen iPadje, dus zeker weten doe ik het niet. En Chrome reageert ook al prima op een gewone background-size: cover; zonder de webkit-prefix en zonder de hele resfresh-operatie:
Je weet het maar nooit met die moderniteiten als css3 ... ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hmm, jouw voorbeelden werken wel goed op m'n iPad, dan ga ik maar eens heel goed m'n best doen om de concrete verschillen tussen jouw en mijn code op te zoeken! ;)

Thanks voor de genomen moeite!

(ik ben er altijd weer van onder de indruk hoeveel moeite jij voor de mensen op het forum doet :o)
 
... hoeveel moeite jij doet ... :o
Klik om te vergroten...
Ach, ik ben een eigenwijs tiepje, hou van puzzelen, heb schoolmeesters in de familie (beetje besmet waarschijnlijk), en wil niet dat machines de baas over de mensen worden. :D

... de concrete verschillen tussen jouw en mijn code ...
Klik om te vergroten...
  1. Ik heb de setAttribute-eigenschap gebruikt i.p.v. de gewone DOM-manipulatie met .style.
    Hoewel Quirksmode waarschuwt "Manipulating attributes. Terrible browser incompatibilities. A bloody mess." Met name IE is nogal onbekwaam in setAttribute. Maar dit is duidelijk een geval van nood. ;)​
  2. Verder gebruik ik "normaal javascript", en jij doet het met string $ toestanden. Daar heb ik geen weet van hoe dat werkt (en is het eigenlijk geen php? dat kan het niet werken ook wel eens verklaren).
Met vriendelijke groet,
CSShunter
 
Haha, nou ik ben er in ieder geval erg blij mee ;)

Ik gebruikt jQuery (vandaag de $). jQuery is een framework dat er in ieder geval voor zorgt dat je je niet (of nauwelijks) druk hoeft te maken over crossbrowser-verschillen en een heleboel procedures die simpelweg een hoop code schelen.

Ik ga het straks nog even met setAttribute proberen, kan op dit moment even niets doen.

In ieder geval weer hartelijk dank voor je toelichting!
 
ik gebruik jQuery (vandaar de $)
Klik om te vergroten...
Zie je wel, abnormaal javascript! :p

Ik vermoed trouwens dat de jQuery-bieb geen kans ziet om er een setAttribute in te zetten, dan zal de bg er toch stringloos met gewone js in moeten. Maar gelukkig wordt ie meteen weer gecoverd. ;)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan