enorme achtergrond-image?

[jeel2008]

iemand wil dat ik een achtergrond op zn website zet die overal past.
het gaat hier om een plattegrond van een gebied.
maar houdt dat in dat , om die kaart werkelijk op alle media passend te maken , van smartphone tot 150cm breed beeld (bij wijze van spreken, ik noem maar wat, ik weet niet wat het breedste beeld is) deze achtergrondfoto dan dus zo breed gemaakt moet worden als het breedste beeld dat er bestaat?
dat wordt toch ondoenlijk qua mbs?
is hier een subtiele oplossing voor?

iets met background-size: cover;?

 

[Tha Devil]

background-size: cover zou de mooiste oplossing zijn maar wordt niet door elke browser ondersteunt.

Wellicht kun je er een daadwerkelijke plattegrond achter te plakken door middel van Google Maps

 

[jeel2008]

hoe bedoel je dat? een link maken naar een bepaalde map die zich dan op de achtergrond toont?

 

[Tha Devil]

Als je via de Javascript API van Google Maps een kaart laat tonen moet je een div toewijzen waar de kaart in komt.

Als je die kaart zo stijlt dat ie de volledige breedte pakt schaalt ie steeds mee afhankelijk van je vensterbreedte

 

[jeel2008]

ok, bedankt!

maar even nog over dat
background-size: cover;

een andere oplossing is er niet?
zoiets al een div van 100% of zo?

 

[crash]

Op verzoek van de TS,naar de CSS sectie verplaatst.

 

[csshunter]

een andere oplossing is er niet?
zoiets al een div van 100% of zo?

Dat zou ook nog wel kunnen: een div op volle breedte, en een (voorgrond!-)image er in dat op {width: 100%} wordt gezet.

• De hoogte schaalt dan mooi mee.
• Maar: bij kleine schermpjes zou de plattegrond dan erg pietepeuterig kunnen worden = onleesbaar!
• Dan zou je daarvoor een inzoom-functie moeten toevoegen.

Een alternatief: plattegrond toedienen op grond van de beschikbare schermbreedte.

• Grote schermen krijgen dan een prachtige gedétailleerde kaart te zien.
• Daarvoor zou je iets van 1024px breedte kunnen aanhouden (= Tablet landscape; dat vraagt met een 20% jpg-compressie niet zo heel erg veel kB's).
• Voor de breedbeelders laat je dat door de browsers opblazen tot de beschikbare breedte.
• Voor smallere schermbreedtes kan je kleinere versies aanbieden (Small tablet landscape = 800px, Mobile landscape = 480px, Mobile portrait = 320px).
• Mobieltjes krijgen dan alleen de hoofdwegen te zien.

Maar een zoombare Google-map binnenhalen volgens plan-ThaDevil is voor elk wat wils, dat lijkt me de beste oplossing.

Met vriendelijke groet,
CSShunter

 

[jeel2008]

achtergrond

ok, bedankt voor alle tips.

wat ik me ook afvroeg: als je een responsive website maakt, en je hebt bv 2 kolommen van 300px
, met tekst, naast elkaar,
gaat een heel breed scherm er dan 3 of 4 kolommen van maken? (gezien het feit dat een heel breed scherm daar eventueel plaats voor heeft),
of rekt ie die kolommen op,
of hoe zit dat?

 

[csshunter]

Dat zit zo:

• Een heel breed scherm (lees: een breed browser-window) doet uit zichzelf helemaal niets.
• Het blijven twee kolommen, en worden geen 3 of 4 kolommen.
• Het blijven kolommen van 300px breed, de kolommen worden ook niet opgerekt.

Tenzij bv. ...
... de kolommen bestaan uit gefloate blokken, dan komen er (met daarvoor geschikte css) net zo veel naast elkaar als de schermbreedte toestaat; of
... de kolommen zijn opgemaakt als table-cell's (die wel kunnen rekken & trekken), of
... je in de responsive css opdracht hebt gegeven om het bij (c.q. tussen) bepaalde breedtes anders te doen.

En wat ook kan: geen fixed width toekennen aan de kolommen, maar een % van de breedte (met desgewenst een min-width en/of een max-width in px, dat is wel handig om niet te smalle kolommetjes te krijgen, of superbrede kolommen met ellenlange regels). Dan zijn de kolommen "auto-responsive".

Met vriendelijke groet,
CSShunter

 

[jeel2008]

groot scherm

hallo csshunter,

bedankt voor de uitleg,

mvg jeel2008