hoe de div's vullen

[willem008]

goede dag

ik wil wat meer vormgeving in mijn website's, heb nu om foto's en layers te maken gimp.(nog steeds engels maar dat komt nog wel een keer).

Het probleem waar ik eigenlijk een beetje mee zit is het volgende.

Stel ik heb met gimp iets gemaak bijv een foto uitgesneden in een bepaalde vorm,
en ik wil die foto op mijn site gaan gebruiken.

om even een simpel voorbeeld te geven

ik heb bijv boven een header en daaar onder een menu , nou zou ik willen dat een gedeelte van de foto in de header komt en een gedeelte in
het menu.

hoe pak je zoiets aan

 

[csshunter]

Hoi Willem,
Dat kan door twee <div>'s te maken: één voor de #header en één voor het #menu.
Je geeft ze elk de ervoor nodige hoogte, en alle twee hetzelfde background-image.
Met de eigenschap background-position kan je bepalen of en hoeveel het bg-image naar boven en/of naar links geschoven moet worden om goed uit te komen.

Stel de header is 250px hoog, en het menu 40px, dan is het image dus 290px hoog.
Het header-gedeelte zal bovenaan in je img staan, dat hoeft dan geen background-position te krijgen (komt automatisch op 0 0).
Het menu-gedeelte zal onderaan in je img staan, dat moet dus 250px omhoog getrokken worden (een negatieve verticale richting); en blijft horizontaal links (op nul) beginnen.

#header {
    height: 250px;
    background: url(images/header-menu.png);
    }
#menu {
    height: 40px;
    background: url(images/header-menu.png) 0 -250px;
    }

• Leesvoer: De Patrijspoort-theorie.

Met vriendelijke groet,
CSShunter