Log In

CSS Villager Backdrops - Free to use!

14 Jan 2017, 11:54 am (Edited 4 Aug 2017, 5:11 pm)
Hi guys :) I recently whipped up some backdrops to put on my villagers with CSS. I really liked how they turned out and figured I'd share em! To put these behind your villager, enter this in your Profile CSS section:

CSS said:
.villager-data-wrapper {
background: transparent;
}
.villager-data-avatar {
background: center url("URL HERE");
background-repeat: no-repeat;
}

Almost forgot: Here's the CSS to get rid of the minipet border and box if it gets in the way :)

CSS said:
.villager-data-minipet {
background: transparent;
border: transparent;
}


Village Backdrops:
Tigereye Peak:
tumblr_ojqzv6i94l1rx0b4wo4_400.png
see it in use here / raw URL for your CSS here

Quetzal Palace:
tumblr_ojqzv6i94l1rx0b4wo3_400.png
see it in use here / raw URL for your CSS here

Oceandome:
tumblr_ojqzv6i94l1rx0b4wo2_400.png
see it in use here / raw URL for your CSS here

Olde Foxbury:
tumblr_ojqzv6i94l1rx0b4wo5_400.png
see it in use here / raw URL for your CSS here

Dragonsmaw Manor:
tumblr_ojqzv6i94l1rx0b4wo1_400.png
see it in use here / raw URL for your CSS here

---
Assorted backdrops:
tumblr_inline_ou6lkszDR21rq5cm5_540.png
[img]https://68.media.tumblr.com/fe3ad81e4cefd312201b555bb6ebfa6e/tumblr_inline_ou6lkszDR21rq5cm5_540.png[/img]
tumblr_ojuqd43u9u1rx0b4wo1_400.png
see it in use here / raw URL for your CSS here
tumblr_inline_ojqywmnYcf1rq5cm5_400.png
see it in use here / raw URL for your CSS here

tumblr_ojqzv6i94l1rx0b4wo6_400.png
raw URL for your CSS here

tumblr_inline_ojs6hrxgww1rq5cm5_540.png
see it in use here / raw URL for your CSS here

tumblr_inline_ojs6hzMnnL1rq5cm5_540.png
raw URL for your CSS here

SU BGs:
tumblr_ok3lfhGb891rx0b4wo1_400.png
see it in use here / raw URL for your CSS here

tumblr_ok3lfhGb891rx0b4wo2_400.png
raw URL for your CSS here

tumblr_ok3lfhGb891rx0b4wo5_r1_400.png
see it in use here / raw URL for your CSS here

tumblr_ok3lfhGb891rx0b4wo3_r1_400.png
raw URL for your CSS here

tumblr_ok3lfhGb891rx0b4wo4_r1_400.png
raw URL for your CSS here

tumblr_ok3minrgli1rx0b4wo1_400.png
raw URL for your CSS here

tumblr_ok3minrgli1rx0b4wo2_400.png
raw URL for your CSS here

tumblr_ok3lfhGb891rx0b4wo6_r1_400.png
raw URL for your CSS here



Template!
I'll make some more in the future but for now if anyone else wants to make their own, here's the template i used:

tumblr_ojs66tsEq81rx0b4wo1_400.png

Save the template, open it on Photoshop (or similar). Paste the image you want above the template and set that image layer to screen or lighten. Right click your image layer and select create clipping mask and you are done!

Hope you guys like em! Let me know what you think, and if you use one or even make your own, i'd love to see how ur villager looks with it on! :)
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png


14 Jan 2017, 11:55 am (Edited 29 Oct 2017, 12:07 am)
BGs people in this thread have provided!:

noll said:


clawbacon said:


briannakitty said:


@Ultron said:


628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 12:00 pm
These are really neat!! Bookmarked for the future <33
Brain Coral Seed sprite icon was made by me ;w;
14 Jan 2017, 12:01 pm
These are really nice! I'm probably going to use them in the future :)
14 Jan 2017, 12:01 pm
these look so great!!! thank you for sharing <3
god's mistake / 23 / Female / MST (Furvilla time -1)]
14 Jan 2017, 12:03 pm
Thanks everyone ! Glad you all like them :) <3
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 12:08 pm
Thank you very much! :)
~ Corgi | ISFJ ~
pokemon__1___bulbasaur_by_invertqueen7-d76561198049800351.pngsonic_running_by_cansin13art-d8jyra8.gif
Buta's FV Stall
14 Jan 2017, 12:09 pm
Awesome! Wow, thanks so much for sharing! Slapping one of these on each and every one of my villagers, but Alessio definitely wears it best! XD

This is really generous of you. :3c Thank you again!
14 Jan 2017, 12:18 pm
Sami-Sumi No problem at all ! And wow, yeah, he looks fantastic!! Thanks for showing me and i'm glad you like them ! :)
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 6:57 pm
Lion These are FANTASTIC! I love the design! I really appreciate you making these for free, and giving a template! I might have to use it!
NJ5dWJ5q2Xt8HcP2ovwxvxWmaCntPc
yahFKa
❤ I am not a mod, but I'm here to help! ❤
14 Jan 2017, 7:03 pm
Rotsuoy I'm glad that you like them!!! :) & it's really no problem, I loved how they turned out and just wanted to share em with everyone! so i'm really glad ppl seem to like them as much as I do. if you do use it i'd love to see what u make! :)
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 7:08 pm
these are so cool! i plan on using these!!
╭━━━━━━━━━━♔━━━━━━━━━━╮
Vee//(he/they)//22//services// need help?
wzezmew
╰━━━━━━━━━━━━━━━━━━━━━╯
nx5na99
i used to be kankri! ping me using @81311!
FV Help Guide | Chris and Rotsy's Guide
14 Jan 2017, 7:20 pm
dakiavis Thank you! Glad to hear it! :) <3
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 7:21 pm
Lion
well if it worked better with the CSS i'm using anyway! XD
i don't know how to apply the backdrop without accidentally moving the villager behind their own about XD
i'll... figure it out eventually? (probably not)
╭━━━━━━━━━━♔━━━━━━━━━━╮
Vee//(he/they)//22//services// need help?
wzezmew
╰━━━━━━━━━━━━━━━━━━━━━╯
nx5na99
i used to be kankri! ping me using @81311!
FV Help Guide | Chris and Rotsy's Guide
14 Jan 2017, 7:31 pm (Edited 14 Jan 2017, 7:32 pm)
dakiavis hmmm that might be because of where you inserted the CSS. i think your code already has the .villager-data-avatar part in there, try replacing it with this and see if that makes a difference?

CSS said:
.villager-data-wrapper {
background: transparent;
}

.villager-data-avatar {
text-align: left;
}
.villager-data-avatar {
width: 100%;
text-align: center;
margin-bottom: 30px;
position: relative;
background: url("URL");
background-repeat: no-repeat;
}


it might also have something to do with where you put this part of the code, i think as long as its below .content it should be fine

i hope this helps rip
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 7:37 pm
Lion

didn't work u.u
but that's fine! i'll probably end up changing which CSS I've used so I can use the backdrops, because they're that cool.
it'd be a fun way to show off which village my villagers came from in their lore.
╭━━━━━━━━━━♔━━━━━━━━━━╮
Vee//(he/they)//22//services// need help?
wzezmew
╰━━━━━━━━━━━━━━━━━━━━━╯
nx5na99
i used to be kankri! ping me using @81311!
FV Help Guide | Chris and Rotsy's Guide
14 Jan 2017, 7:39 pm
dakiavis aw rip. CSS is a fickle beast. coding always is :'/

omg, that is flattering though aha. thats actually what i'm using them for myself :) <3
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 7:41 pm
Lion
great minds think alike i guess!
minus when it comes to CSS. you're the only good one of us for that XD
╭━━━━━━━━━━♔━━━━━━━━━━╮
Vee//(he/they)//22//services// need help?
wzezmew
╰━━━━━━━━━━━━━━━━━━━━━╯
nx5na99
i used to be kankri! ping me using @81311!
FV Help Guide | Chris and Rotsy's Guide
14 Jan 2017, 7:42 pm
tysm for sharing, these look great <3
17996216_RD1dI9m1tiX6M7o.gif?1574352917
art by lunarlicorice of my beloved Noodle :')
14 Jan 2017, 8:05 pm
These are very pretty! You did a good job~
~PING ME~

Beta Edgelord

ALL kitty village. you got a kitty item?
I WANT IT

~PING ME~
14 Jan 2017, 8:24 pm
Thank you guys!!!
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
14 Jan 2017, 10:49 pm
very nice! i used it for all of my villagers
Click my kiddos
BBJSQ.gifVqyQT.gif p4LnU.gif w92wR.gif
14 Jan 2017, 10:51 pm
LordMoonBiscuit I love the picture you used :) ! glad you like it ahh
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png
15 Jan 2017, 12:13 am
These are super cute! I put one behind all my villagers.

Thank you so much for making them and allowing us to use them! 'v'
Untitled.png
Clayton
She/Her
Font color is #628500
15 Jan 2017, 12:20 pm
claytondog !!! glad you like them! they look fantastic on ur villagers ! the space one on Zenith is very fitting :)
628-lion-cub.png 1578-macaw-sphinx.png 2607-treasure-seeking-pirate-parrot.png