div achtergrondafbeelding "resizen"

[kiwimichiel]

Ik probeer met mijn website een div te maken met een achtergrondafbeelding (750 x 1000) waarboven ik dan tekst typ.
Maar de inhoud van de div (de tekst) gaat regelmatig veranderen (meer of minder tekst) Daarom moet de div ook groter of kleiner kunnen worden en moet de achtergrond zich aanpassen.
Ik heb al veel gezocht met google op 'background resize' etc maar ik heb niets gevonden.

Is dit mogelijk met css en hoe? Of heb je een betere oplossing voor het probleem?

 

[renss78]

Zet de div op relative en en de height + width op auto( in de css natuurlijk)

Of je moet met % werken inplaats van px maar dat weet ik niet zeker.

En als je wilt dat hij een minimale grootte pakt(Anders word het heel klein met weinig tekst):

min-height:100px;
height:auto;

 

[That Guy]

Maar de inhoud van de div (de tekst) gaat regelmatig veranderen (meer of minder tekst) Daarom moet de div ook groter of kleiner kunnen worden en moet de achtergrond zich aanpassen.

Een block-element wordt zowiezo wel groter en kleiner als de inhoud veranderd. Een div, zoals jij wilt, heeft standaard een width van 100%, en zal qua hoogte mee-resizen met je inhoud.

Het enige wat je hoeft te doen is dit:

/* css */

div
{
   width: 750px;   /* breedte achtergrond plaatje */
   background: transparent url(locatie/plaatje.jpg) no-repeat 0 0;
}

 

[Steegbeer]

Mag ik vragen ?
Wordt de oorspronkelijke afbeelding met de wijziging van deze mooie php code ook kleiner of groter. Is het het niet verstandig om eerst de afbeelding eerst te resizen naar ongeveer de maten die je wilt hebben deze op te slaan als tiff of giff want dat laad lekker snel en dan die php code erop loslaten.
Ik vraag dit omdat ik niet zoveel verstand heb van php.

 

[kiwimichiel]

Dat met die code aanpassen werkte niet, ik heb het opgelost met een tabel van 3 rijen en 3 kolommen met op de hoeken een afbeelding van een afgerond hoek.
Maar nu heb ik een volgend probleem: die hoeken zijn lichtjes donkerder dan de rest van de tabel (of ligt dit aan mij?)

je kan het hier zien. Het is de onderste van de 2 'lichtgrijze' kaders

 

[kiwimichiel]

Dat met die code aanpassen werkte niet, ik heb het opgelost met een tabel van 3 rijen en 3 kolommen met op de hoeken een afbeelding van een afgerond hoek.
Maar nu heb ik een volgend probleem: die hoeken zijn lichtjes donkerder dan de rest van de tabel (of ligt dit aan mij?)

je kan het hier zien. Het is de onderste van de 2 'lichtgrijze' kaders

iemand?

 

[csshunter]

Hoi kiwimichiel,

iemand?

Als ik op dinsdag 4 januari 2011 17:18 een vraag post en op woensdag 5 januari 08:48 nog geen antwoord heb gehad, zou ik niet ongeduldig worden.

(...) die hoeken zijn lichtjes donkerder dan de rest van de tabel (of ligt dit aan mij?)

Nee het ligt niet aan jou. Er zit een miniem kleurverschil in de hoekjes en de rest:

Je kan dit hier beter zien, zonder overstaling door de omgeving.

- - - - - - - - - -

Maar om niet je toevlucht te moeten zoeken in tabellen, kan je het met 1 image en wat css regelen.

<div id="main">
    <div id="topcorners"><!-- ! --></div>
    ...
    tekst
    tekst
    tekst
    ...
    <div id="bottomcorners"><!-- ! --></div>
</div>

#topcorners,
#bottomcorners {
    width: 900px;
    height: 10px;
    background: url(images/hoekjes.gif);
    }
#bottomcorners {
    background-position: 0 -10px;
    }

En dan dit gecombineerde image voor alle hoekjes:

Hierboven zal je de hoekjes niet kunnen zien vanwege de lichte achtergrond eromheen.
Maar het is een afbeelding van 900x20px met in de bovenste helft van 10px het linker- en rechter-bovenhoekje, en in de onderste helft het linker- en rechter-onderhoekje.
Ik heb de hoekjes van de header-afbeelding aangehouden: die hebben geen kleurverschil, en nu zijn ook alle hoekjes even groot.
Door de hoekjes als background-img in een eigen <div> op te nemen (die maar 10px hoog is), kan je via de background-position het bovenste of onderste deel laten zien.
Omdat deze twee hulp-div's binnen de #main zitten, kan de tekst ertussen zo groot of klein worden als je wilt: de hoekjes aan de onderkant scharnieren mee en komen automatisch op de goede plaats.

• Desgewenst: uitleg over background-position van images.
• En nog veel meer over hoekjes.

Met vriendelijke groet,
CSShunter

 

[kiwimichiel]

Hoi kiwimichiel,

Als ik op dinsdag 4 januari 2011 17:18 een vraag post en op woensdag 5 januari 08:48 nog geen antwoord heb gehad, zou ik niet ongeduldig worden.

sorry, het is waarschijnlijk omdat ik bij mijn eerst vraag zo vlug ben geholpen geweest.

Bedankt voor je uitleg!! Ik ga het vanavond eens proberen:thumb: