Archief - hoeveel verschillende achtergrondresoluties?

Hallo,

ik heb een custom achtergrond gemaakt die ik op m'n website wil gebruiken.
Ik zou graag hebben dat de achtergrond bij iedereen, op gelijk welke resolutie 'perfect past'.

Hiermee bedoel ik dat de browser volledig gevuld moet zijn, en dat er geen scrollbars verschijnen omdat de achtergrond groter is dan de pagina.

Ik heb er al over gelezen, maar kom steeds uit op een methode waarbij door
javascript de gebruiker doorgestuurd wordt naar ofwel:
-een pagina van 1280x800
-een pagina van 800x600
Dit brengt mij wat in de war want er zijn toch veel meer resoluties die tegenwoordig gebruikt worden?

Als ik de site bv. op mijn hdtv bekijk (1920x1080) moet al het wit van de browser ook gevuld zijn door de achtergrond.

De achtergrond is 1 klein object dat steeds gekopieerd is en in laagjes over elkaar gelegd. Ik heb hem op hoge resolutie gemaakt (3000x2000) zodat ik alle kleinere resoluties eruit kan snijden.

Nu vraag ik mij enkel af of ik ze zelf moet snijden op alle gangbare resoluties, afzonderlijke jpeg's opslaan op mijn server en bezoekers naar de juiste sturen, of kan men bv. van 1 grote afbeelding slechts een deel weergeven of ze automatisch bijsnijden (programma op de server ofzo) naargelang de resolutie van de bezoeker?

De afbeelding herhalen is geen optie.

Dank bij voorbaat

Hoe je de resolutie van je bezoeker ophaalt laat ik in het midden.
JS zal wel een goeie oplossing zijn voor zo iets, al denk ik dat het met de meeste talen kan.

Voorts kan je eventueel wel alle resoluties snijden en dan op je achtergrond zetten.
Maar om welke afbeelding gaat het, dan kunnen we beter voorstellen over wat het gaat en dan kunnen we misschien andere voorstellen doen.

Zo is misschien een div ook een oplossing.
Een div van 100%x100% vult ook volledig je scherm.

je kan met javascript checken welke resolutie uw browser heeft en dan de body aanpassen met css.

bijvoorbeeld verschillende klassen maken

body.alt{
background: url(images/achtergrond1920.jpg);
}
body.alt2{
background: url(images/achtergrond1024.jpg);
}

etc.

en dan met javascript klasse toekennen aan uw body naargelang de resolutie.

Is maar een idéé , heb het zelf nog niet geprobeerd

Haalt zo een javascript-code niet enkel de resolutie van het scherm op? Veel mensen gebruiken hun browser namelijk niet altijd fullscreen, dus is zo een script niet altijd betrouwbaar. (ik gebruik bijvoorbeeld een resolutie van 1440x900 maar mijn browser is 1024px breed)

Unlimited4s zei:

Haalt zo een javascript-code niet enkel de resolutie van het scherm op? Veel mensen gebruiken hun browser namelijk niet altijd fullscreen, dus is zo een script niet altijd betrouwbaar. (ik gebruik bijvoorbeeld een resolutie van 1440x900 maar mijn browser is 1024px breed)

Klik om te vergroten...

kunt het dan altijd laten checken by viewport change?

adrianhates zei:

kunt het dan altijd laten checken by viewport change?

Klik om te vergroten...

Ah, had daar nog niet aan gedacht. Zo zou het idd wel moeten werken

Unlimited4s zei:

Ah, had daar nog niet aan gedacht. Zo zou het idd wel moeten werken

Klik om te vergroten...

ik weet ni zeker of da mogelijk is ze. Was maar een gedacht

maak gewoon 1 image die scalable is naar grootere resluties toe.

bv de essentie van je bg zet je op 1024x768.
iedereen met grotere schermen krijgen gewoon NOG meer dingen te zien in de bg.

Ik zal even een voorbeeldje maken in Photoshop en vanavond posten.

Bedankt voor de snelle reacties

Ik heb 2 voorbeeldjes gemaakt zodat het wat duidelijker is wat ik bedoel.

Ik heb in dit voorbeeld de cover van een magazine gebruikt, 20 x gekopieerd,
wat gedraaid met free transform en het in laagjes over elkaar gelegd.
Dat is de achtergrond en zou altijd de hele browser moeten vullen.
De tekst komt in een (beetje doorzichtige) tabel die gecentreerd zal zijn.
De tabel moet niet 'meegroeien' met de resolutie, die moet enkel de
tekst kunnen bevatten en eventueel scrollen binnenin de tabel.

Voorbeeld.

@UnD3RD0G

Bedoel je zoiets? (Het grijze gedeelte stelt de achtergrond voor)

Dat de achtergrond niet vergroot/verkleind wordt, maar dat er gewoon meer (in dit geval covers van het magazine) wordt weergegeven?

freekdl zei:

Ik heb 2 voorbeeldjes gemaakt zodat het wat duidelijker is wat ik bedoel.

Ik heb in dit voorbeeld de cover van een magazine gebruikt, 20 x gekopieerd,
wat gedraaid met free transform en het in laagjes over elkaar gelegd.
Dat is de achtergrond en zou altijd de hele browser moeten vullen.
De tekst komt in een (beetje doorzichtige) tabel die gecentreerd zal zijn.
De tabel moet niet 'meegroeien' met de resolutie, die moet enkel de
tekst kunnen bevatten en eventueel scrollen binnenin de tabel.

Voorbeeld.

@UnD3RD0G

Bedoel je zoiets? (Het grijze gedeelte stelt de achtergrond voor)

Dat de achtergrond niet vergroot/verkleind wordt, maar dat er gewoon meer (in dit geval covers van het magazine) wordt weergegeven?

Klik om te vergroten...

Yup zoiets ongeveer, maar om praktische redenen zou ik left top uitlijnen en niet in de 4 richtingen laten groeien.
Alsook zou ik zeker niet de BG van de transparante 'tabel' ( gebruik divs! ) in de BG steken , maar als een HTML element.