css background image passend aan div

[baws]

Hallo,

ik heb een div

#Inhoud
 { 
 position:fixed;
 background-image:url('../Images/inhoud pagina.png');
 top:15%;
 overflow:auto;
 background-color:brown;
 height:77%;
 width:70%;
 margin-left:10%;
 padding-left:5%;
 }

In deze div wil ik dat de background image precies past, ik kan wel vinden hoe dit werkt met een voor af aangegeven height en width in pixels maar niet in %.
de afbeelding moet dus helemaal opgerekt worden of verkleind naar de resolutie.

 

[dudstone]

Het probleem echter is naar mijn mening, dat de div dan wel kleiner wordt, maar ook dat de afbeelding dan gewoon niet helemaal zichtbaar is. Ik denk dat je dit met behulp van javascript kan oplossen.
Heb je anders al gebrobeerd:

background-attachment:fixed;

 

[baws]

background-attachment:fixed;
daarmee zorg je alleen dat de achtergrond op de zelfde plaats blijft tijdens het scrollen, niet dat de achtergrond passend wordt gemaakt aan de resolutie

 

[csshunter]

Hoi baws,
Met css2.1 kan je geen background-img schalen, alleen voorgrond-images (die in de html als <img src="..." ... /> staan).
Met css3 kan je wel bg-images schalen, maar nog lang niet iedereen gebruikt een browser die dat ondersteunt. Een snelle oplossing is er dus niet.

Maar wat wel kan: twee identieke div's maken, die exact over elkaar heen zijn gepositioneerd.

• In de onderste div zet je het "background-img", maar niet als bg-img maar gewoon als html-img op de voorgrond.
• Dat img geef je een breedte of hoogte van 100%, waarmee de hele div gevuld wordt. De hoogte resp. breedte schaalt dan vanzelf mee.
• In de andere div zet je de tekst enz. die boven de afbeelding moet komen.

Een voorbeeld/beschrijving van zo'n met het schermformaat meeschalend "background-img" is te vinden in het Reisverslag uit Cascadeland: www.bliksekaters.nl/subs/reisverslag/12.htm
Attentiepunten:

• Als zowel de hoogte als de breedte van de container variabel moet zijn, kan de figuur uit proporties raken als je voor allebei 100% opgeeft. Dat kan storend zijn als het niet om een puur versiersel-img gaat (bv. een foto of tekening).
• Maar als je dat niet doet, kan je een strook van de afbeelding in de breedte of de hoogte gaan missen.
• Het moet van geval tot geval bekeken worden of het haalbaar is, want blijft dus een beetje linke soep!

Met vriendelijke groet,
CSShunter
_________
PS: Met javascript zou je ook alleen maar een voorgrond-img kunnen schalen; maar dat kan dan net zo goed (= beter, makkelijker, enz.) met css.