Ik heb een sprite.png gemaakt (veel veel tijd daarvoor besteed) en css code in mijn template.css geplaatst. Dus, klaar. Er is veel info daarover op internet te vinden. Maar, wat verder, kon ik niet vinden. Hoe deze images, bijvoorbeeld in de header op juiste positie te krijgen???
Mijn header heeft twee background afbeeldingen. Nu de code is:
Code:
.header{
top: 25px;
width: 100%;
position: absolute;
height: 350px;
background-image: url('../images/header1.png'), url('../images/header2.png');
background-position: 12% 55px, right top;
background-repeat: no-repeat;}
Css sprite codes voor deze twee afbeeldingen zijn:
Code:
.header1 {
background-image: url('../images/hsprite.png') no-repeat;
background-position: -771px -699px;
height: 100px;
width: 360px;}
.header2 {
background-image: url('../images/hsprite.png') no-repeat ;
background-position: -771px -335px;
height: 344px;
width: 419px;}
En, hoe kan ik deze codes combineren om de juiste afbeelding op de juiste positie in de header te hebben? Er zijn voor iedere afbeelding twee background-position regels met verschillende px's.
Dus, header1 moet in de sprite van positie -771px -669px opgepakt worden en naar positie 12% 55px in de header geplaatst worden.
Hoe kan ik deze krijgen? Welke code moet in mijn template css geplaatst worden? Daarover heb ik geen informatie gevonden.
Dezelfde geldt ook voor andere images: "home" in menu item, enzovoort.
Kan iemand mij helpen om dit probleem op te lossen?
Voorbaat bedankt,
Vero
Edit Peter: Ik heb je topic verplaatst naar het juiste forum. 
Heeft onderwerp gestart
