« Web, HTML, Tech Forum

Is there a way to put images and other sorts of decor right below my contacting stuff in the left column of my profile?

It's super empty and sad-looking compared to the comments on the side!


Something like this...!


Report Topic

8 Replies

Sort Replies:

Reply by suki

posted
updated

you could use :after. make one tall image with all the images you want in it in your photo editor of choice, then add this styling:



div.col.w-40.left > div:nth-child(7):after {
content: " ";
display: block;
height: 200px;
margin-top: 10px;
background: url('YOUR-IMAGE-URL-HERE.png') no-repeat;
background-size: cover;
}


tweak the height property until your image fits comfortably without being cropped. (too low height will crop the bottom and too high will crop the sides) you could leave some empty space at the bottom of the image when making it so you don't have to fiddle around too too much.




when done it should hopefully look something like this:



Permalink Report Reply

Reply by Free Bagels

posted
updated

thank you so much!! I'll try it out when my computer's all charged! ^_^


Permalink Report Reply

Reply by lou ৎ୭ (autoplay)

posted

can you do this under the comments????


Permalink Report Reply

Reply by Free Bagels

posted

if I couldn't figure out how to do that, I don't think I could do that. that is a pretty good idea though.


Permalink Report Reply

Reply by lou ৎ୭ (autoplay)

posted

oh! sorry! i said it as "is it possible" hoping the person who helped you would get notified but now I see they don't, so don't worry! this was still helpful!


Permalink Report Reply

Reply by suki

posted
updated

sure, just replace the selector (div.col.w-40.left > div:nth-child(7):after) with one of these:


.comments-table:after - space below will expand to accommodate its height, but sits above the "next page" button under the comments


.inner .pagination:after - below "next page" button, but seemingly can't expand the size of the space below (as such: needs a fairly low height, 200px or so)


Permalink Report Reply

Reply by Sip O' Poison

posted
updated

Yo I did what suki said but replaced the “div:nth-child(7)” part with “div:nth-child(8)” and it goes underneath the links section like you wanted ^^ so it’s actually this


div.col.w-40.left > div:nth-child(8):after {
content: " ";
display: block;
height: 200px;
margin-top: 10px;
background: url('YOUR-IMAGE-URL-HERE') no-repeat;
background-size: cover;
}


Permalink Report Reply

Reply by imart decor

posted
updated

When it comes to creating decorations for holidays, parties, or other special events, a stencils store offers an incredible range of designs. Whether you're crafting banners for a wedding, customizing invitations, or designing your own greeting cards, stencils provide the perfect way to add a personalized touch. From seasonal themes to elegant patterns, a stencils store has everything you need to prepare for any occasion. https://stencillo.com/collections/arabic-calligraphy-stencils-for-canvas


Permalink Report Reply