Tessisamess

Information

Hey guys! I made this a while back and was crazy out it and really excited to post it... and then I IJ wouldn't play nicely with it and I quietly put off reworking it until now. 😬 It's done now, though, and it works perfectly!

This image grid comes with built in, editable texture overlays and is resizable! This comes with two grid layout options, but you can always use this generator to make a new configuration if you're comfortable doing so. (I might add more grid layouts later.) Enjoy! 💖

Coding: Grid #1

<lj-raw><div style="margin:0 auto 5px auto;width:750px;height:1000px;padding:60px;box-sizing:border-box;background:#bbb url(BG_IMG)center;position:relative;"> <!---GRID CONTAINER---> <!--IMG--> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> </section> </div><center style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;"><a href="http://tessisamess.insanejournal.com/131273.html" style="text-decoration:none;color:#bbb;">CODE</a></center></lj-raw>

Coding: Grid #2

<lj-raw><div style="margin:0 auto 5px auto;width:750px;height:1000px;padding:60px;box-sizing:border-box;background:#bbb url(BG_IMG)center;position:relative;"> <!---GRID CONTAINER---> <!--IMG--> <div style="grid-area:one;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:two;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:three;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:four;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:five;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:six;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:seven;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:eight;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:nine;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> <!--IMG--> <div style="grid-area:ten;background:#ddd url(IMG_URL)center;background-size:cover;"> <div style="width:100%;height:100%;background:url(https://i.imgur.com/uTpDodp.png);opacity:0.7;filter:invert(100%);"></div> </div> </section> </div><center style="font-family:georgia;font-size:8px;letter-spacing:4px;color:#000;text-align:center;"><a href="http://tessisamess.insanejournal.com/131273.html" style="text-decoration:none;color:#bbb;">CODE</a></center></lj-raw>

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

DIMENSIONS

60px - Container padding
1000px - Container height
750px - Container width
10px - Grid gap

TEXTURE EDITING

https://i.imgur.com/uTpDodp.png - Texture overlay (use png textures only)
opacity:0.7; - Change the intensity of the overlay
filter:invert(100%); - Change whether the overlay is dark or light (100% is white)

COLORS

#fff

Image content background

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!