Deviation Actions

CypherVisor's avatar

Custom-box Background Tutorial


»»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««

Updated: 23-Feb-2014

How to use ?

Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.

Spanish translation of this tutorial

Tutorial fondo en caja Custom. by FanasY


Code to insert an image without stretching: (ORIGINAL CODE)

<div class="popup2-moremenu"><div class="floaty-boat"><br><img src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>

Code to stretch an image (It works as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :

Insert the width and height in the <img> tag of the code as shown below:

<img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/>

<div class="popup2-moremenu"><div class="floaty-boat"><br><img width="1000" height="1600" src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>

How to insert a content-holder box inside a custom box?

Simply copy a content-holder boxes from my gallery folder here: LINK and paste it where it says "Body text here.." in the above code.

My background image link (the background that I've used for demo in this tutorial)

Other tutorials

Custom background for DeviantID-box widget:
deviantID widget box customization tutorial by CypherVisor

Custom background for New deviation-box widget:
Deviation-box background tutorial by CypherVisor

The content holder box used in this tutorial

Shadow Content-holder box (Default Bright) by CypherVisor

Want to customize your profile more?

Check all my free resources + tutorials:…

Having any doubt? Please read this F.A.Q. + Tips n Tricks before writing a comment below.

I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some
points :points: to me as an appreciation or support.

I take commissions to make custom journal CSS too. Check out my Journal CSS folder or Read-made Journal Skins. Send me a note to contact me.
Image details
Image size
800x3050px 852.09 KB
Join the community to add your comment. Already a deviant? Log In
The-OwO's avatar

Is ms PAINT ok for it?

Kuromo-chan's avatar

you can use mspaint

MrCyberly's avatar
I'm seeing this tutorial has become severely outdated as I'm also seeing backgrounds in some custom widgets has screwed up because of the recent changes DeviantArt has gone through. Whatever DeviantArt did to screw up whatever else we can do in our custom widgets, Cypher probably should be updating these tutorials so that we can all adapt and benefit again.
fatherinsect's avatar
bro it doesnt work anymore ;;;;;;;;;
OreotheCookieArtist's avatar
Still not getting it.. You aren't being more specific enough... No offense..
CrookedEmerald's avatar
nooOOO I've literally been trying this forever until I read that this was only for super groups ;-;
Thanks though
PearlGoth's avatar
How do I know what size to use for me?
kittngore's avatar
i know im not core but it... doesnt work anymore?? im
kittngore's avatar
like i know i cant have custom boxes but this isnt working for my friends who can and it isnt working for me when i do the preview widget thing
samira-channn's avatar
same here, i rlly need help with this 
TheCocodile's avatar
SAME, it's been setting me off a lot!
LoovArt's avatar
where is the custom box-
temmieskullz's avatar
its only for core members only sorrs
AntElf's avatar
How to put the words inside the box?
Hm by ruby-panotic  
MrCyberly's avatar

Gah! I'm having the same problem as you are! DX

Artisanyumi's avatar
This was very helpful, thank you :D 
xDirewolfy's avatar
You'll need copy and paste this code here into your custom box:
<div class="popup2-moremenu"><div class="floaty-boat"><br><img width="1000" height="1600" src="URL"/></div></div><div class="gr-box gr-genericbox"><br>Body text here..</div>

After "Src=" you'll need to paste the image in where it says URL. To do that, just go to place where the image was originally uploaded, in this case the Stash, just right click and copy the image address and paste it where it says URL, and your background should show up in the custom box.

You'll need to put some stuff in it in order for the entire background to show up/expand of course.

Just put your coding or anything else where it says "Body text here" and all should be fine~

If it doesn't work, I'd be happy to help!
kraxchet's avatar
thanks mate^^
teavacado's avatar
it won't work for me and i'm really confused ahh
Mercury-Vitae's avatar
hi, sorry if this is a dumb question but when i do this, the content holder boxes by cyphor dont show or are pushed to the bottom? any advice? I can note you but dont wanna be a bother
Joaqui-Studio's avatar
It also works if I want to put images
KiruQ's avatar
This helped me ♥ Thank u~.
Join the community to add your comment. Already a deviant? Log In