Is this even possible?
Replies
I want to make my pets' profiles prettier and the one and only thing I've been wanting to do is add a small image on the upper right-hand corner. This is what I'm talking about. Please ignore the shitty drawing that literally took me 20 seconds lol. Is there a way to add a small image (drawing or photo, etc.) to the profile without completely changing the whole code and graphics that are already there? Please tell me it's possible and make it easy to understand because I'm just learning coding. ^^;
yeah here is one way to do it below:
Just put this after the html that you already have in the pet description
Add inside the style tags
{
overflow: visible;
}
{
position: absolute;
top: 175px;
right: -32px;
}
Quick explanation:
-
Setting to overflow: visible overrides the value that was set, so the image being added will be visible outside content div (the white box)
-
Setting position to absolute makes it relative to content in this case since it's the first ancestor to be positioned.
Quick Ancestor term explanation for html context (just in case)
-
Now setting top and right will move the image around these numbers will probably need tweaking to get the position you desire since your image will be a different size. So to help understand if top and right set to zero then the image will be displayed in the top right corner of the content box since positioning is relative to it. So negative numbers will make the image overflow the content box.
-
Now if the default size of your image is not to your liking add "width: 64px; height: 64px;" inside CSS adjust the numbers to the size you want. Note best numbers to start with would be the image's size.
Please let me know if my explanation was clear or not also if you have any further questions please let me know.
-