What I want to achieve
Position separated facial parts correctly within a character in a web app
Resources
Image Files
- Body:
character-body.png - Left Ear:
character-left-ear.png - Right Ear:
character-right-ear.png
Codes
HTML
- place each
imgelement inside adivelement. - this
divelement will be a container as a reference position of eachimgelement by CSS
<div className="character">
<img src="/src/assets/character-body.png" alt="Character body" className="character-body" />
<img src="/src/assets/character-left-ear.png" alt="Left ear" className="ear left" />
<img src="/src/assets/character-right-ear.png" alt="Right ear" className="ear right" />
</div>
CSS
- set
position: relativefor the container class andposition: absolutefor each part - set the container's
widthandheightto the same value as the PNG file of the body - set the Ear's
widthandheightto the same as above - make the body part fill the container full by
width: 100%andheight: 100%because it's the main part of the character - set the
topandleft(orright) properties of each part to locate it correctly in the body
/* Character styles */
.character {
position: relative;
width: 300px; /* Adjust based on the image file*/
height: 400px; /* Adjust based on the image file */
}
/* Body styles */
.character-body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Ear styles */
.ear {
position: absolute;
width: 50px; /* Adjust based on the image file */
height: 100px; /* Adjust based on the image file */
}
.left {
top: 50px; /* Adjust top to fit the body */
left: 20px; /* Adjust left to fit the body */
}
.right {
top: 50px; /* Adjust top to fit the body */
right: 20px; /* Adjust right to fit the body */
}
Next Goal
check if this works for a responsive website as well.
Top comments (0)