Put an image on pet profile, but...
Replies
...layer it sort of over top of everything I guess? We'll use Kittycats as an example. I would like to put a picture in the upper right-hand corner of her profile, like half way over the white bit so it doesn't look so bare. I would also like to add a couple more images, maybe one on the left-hand side on the other blank white spot.
Is there a way to do that without getting too stupid complicated or having to commish a profile? Because I'm doing this myself as I am broke off my butt lol. This is the last bit I have to learn (besides text boxes, but that can wait until later) before I can start submitting the new babies for spotlight.
Hey there! I did a quick little mockup of layering an image over a pet description here!
I'll share the code for mine with you and you can edit it to fit your needs.
This goes inside the style tags
{
background-image: url(https://azpng.com/png/2019/04/14/fire-clipart-transparent-vector-300x300.png);
background-size: 100px 100px;
height: 100px;
width: 100px;
z-index: 999;
position: absolute;
top: 10px;
left: 300px;
}
;){kind=link}
This goes outside the style tags
Change the url to the url of your image, then make sure input the desired size of your image in px in both the background-size, height, and width.
Z-indexing is what will decide what is layered on top of what. The higher the z-index, the closer the image will be to the front of the screen. I just set mine to 999 because I use z-indexing sometimes for other things in my profiles like treasures so 999 will definitely be higher than anything else I'd use it for. Here's more info on z-indexing.
Of course, you can change the positioning (absolute, left, right) to fit your needs. Just sharing how I would code it into my own profiles. (:
Let me know if I can provide any further info!
Do SonataMoon and Cherlyn have what you want?
If so, I simply used a HTML color to match the color of the image's background and used code to place the images in their respective positions.
But honestly, Kittycats looks nice as is. I think all you'd have to do is make sure the appropriate profile credits are there and she'd be ready for spotlight.
[tot=PiplupMagby34]
try however you did it in the first place again, but this time also make sure to add this code to your CSS:
{overflow: visible}
everything you add to the profile HTML (anything outside the style tags) ends up inside pet_desc. pet_desc is inside pet_info, which is the big white box. anything that extends over the edge of pet_info will disappear unless pet_info's overflow is set to "visible" - meaning, instead of hiding or scrolling to show things that surpass the edge, it will just appear as-is. let me know if that works!
