div bg img in procenten

[FoRo]

Hallo,

Weet iemand of je in css een bg image de grootte in procenten kunt weergeven zodat een achtergrondplaatje er voor elk scherm op de maximale grootte kan staan?
Ik wil dit gebruiken als achtergrond voor een menu.

#apDiv2 {
position:absolute;
left:40%;
top:0%;
width:30%;
height:100%;
z-index:2;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../img/maan_05.gif width:25% height:100% );
}
Bovenstaand voorbeeld werkt uiteraard niet, maar hoe wel?

[RobIII]

Waarom zou je dat willen? Dat wordt never-nooit mooi. Browsers staan nou eenmaal niet bekend als "resize-koningen" en het effect dat je beoogt zal echt niet mooi worden.
Daarnaast is er bij mijn weten geen CSS oplossing voor wat je wil, hoewel met wat JS vast wat te knutselen is...

Er is overigens ook prima zat te vinden over dit onderwerp (o.a. deze of deze)

offtopic:
Pssst: code tags

Overigens, welkom op GoT

[ Voor 43% gewijzigd door RobIII op 08-09-2007 02:32 ]

[crisp]

CSS oplossing is in de maak: http://www.w3.org/TR/2005...0216/#the-background-size
Ik meen dat Opera 9.5 er al experimentele support voor heeft, Safari mogelijk ook al

[FoRo]

RobIII schreef op zaterdag 08 september 2007 @ 02:20:
Waarom zou je dat willen? Dat wordt never-nooit mooi. Browsers staan nou eenmaal niet bekend als "resize-koningen" en het effect dat je beoogt zal echt niet mooi worden.
Daarnaast is er bij mijn weten geen CSS oplossing voor wat je wil, hoewel met wat JS vast wat te knutselen is...

Nou, ik wil het alleen maar zo hebben dat een bg img er op een 17 of 19" scherm 100% hoog is.
Het plaatje maak ik op de grootte voor een 19" scherm zodat die voor de 17" verkleind wordt.
Ik kom alleen in de problemen als er schermen komen van 24" hoog ( nog niet veel van gezien).
Omdat W3C het niet ondersteund zal ik wat anders moeten knutselen.

Bedankt voor de reakties allen

[FragFrog]

Ik gok dat je beter af bent met javascript screensize detecteren en voor de meest gebruikte screensizes aparte achtergronden te maken. Op die manier hoeft een browser niet te resizen en kun je toch een image de volledige achtergrond laten vullen. Zie ook deze howto

Overigens, schermgrootte != schermresolutie en schermresolutie != beschikbare browserresolutie Als jij designed voor een firefox scherm met een paar extra bars erin ziet iemand die IE gebruikt op exact hetzelfde scherm met exact dezelfde resolutie wellicht losse ruimte of juist scrollbalken. Een achtergrondimage 100% laten zijn is lastig en zeer zelden noodzakelijk. Wellicht is het beter je design eens te heroverwegen of te zorgen dat er bijvoorbeeld repeterende elementen in zitten die je kan gebruiken met een vaste header en footer

[ Voor 40% gewijzigd door FragFrog op 09-09-2007 13:54 ]

[FoRo]

Ik ben niet zo goed in javascript.
Hoe schrijf je een script dat die in geval van de ene of andere beeldschermsresolutie een andere img ( in css? ) laadt?

[RobIII]

FoRo schreef op zondag 09 september 2007 @ 17:34:
Ik ben niet zo goed in javascript.
Hoe schrijf je een script dat die in geval van de ene of andere beeldschermsresolutie een andere img ( in css? ) laadt?

Lees het verhaal hierboven nog eens goed. Ook al heb ik een 19" of 17" of 24" of desnoods 12" scherm, dan nog kun je niet van een bepaalde grootte uitgaan. Ik kan prima 1024x768 op een 24" scherm draaien ( schermgrootte != resolutie ) of met een niet-gemaximaliseerde browser werken (dat komt in het verhaal hierboven wat scheef over omdat het niets met resolutie te maken heeft). En dan kun je ook nog een bult werkbalken wel/niet geïnstalleerd/zichtbaar hebben en dan blijft er ook daarvan afhankelijk weer meer/minder canvas over voor je pagina/achtergrond.
Ik zou naar repeterende elementen kijken of een egale achtergrond als ik jou was. Als je het per-se wilt is er (zoals vaker gezegd) wat te knutselen met JS, maar dat gaan we je hier niet voorkauwen; daar mag je best zelf eerst wat moeite voor doen (begin eens met wat googlen en zelf wat proberen in elkaar te draaien). Met bovenstaande post (en de daarin gelinkte HowTo) moet je al een heel eind kunnen komen met wat inzet.
Je post zoals ik die hier quote is een schoolvoorbeeld van een scriptrequest en daar doen we hier niet aan Kijk ook eens even door onze Programming Beleid Quickstart. Hoewel die voor PRG bedoeld is en niet zo zeer voor WEB gaat de "rode draad" toch ook werkelijk hier in WEB op. Overigens vind je in WEB een soortgelijke tekst hier

[ Voor 15% gewijzigd door RobIII op 09-09-2007 18:34 ]