Shop Mobile More Submit  Join Login

Featured in Collections

Journals, News by little-billie


Submitted on
November 19, 2011


15,348 (2 today)
173 (who?)
Hello this is ClefairyKid, your new co-founder, I've just joined the group to lend some of my experience on the subject of profile customisation. What follows is some advice taken from the article I wrote here; DeviantArt Customisation Explained. Go there if you want a general overview of all customisation concepts (I'll be covering one subject at a time here to save confusion).

Custom Box Backgrounds

The thing I am most often bombarded with questions about. There are some important things to remember about these;

:bulletblue: You MUST be a premium member on dA to use the code.

:bulletblue: You must create the image at the size it will appear in the module, these images do not tile, therefore it is best to create a static image with as small a file size as possible so that it does not take too long to load.

:bulletblue: You need to therefore account for the changing length of the module as you edit it's content, making a physical size of about 600px by 2000px a safe choice (although there will be other suggestions from tutorials etc out there).

:bulletblue: You need to host the background image somewhere, you can do this for free on a site like Photobucket, or in your deviantart scraps (make sure to allow the download option if you upload it to dA). You will need the direct URL link to copy into the code used in the module.

:bulletblue: PLEASE NOTE however, if you choose to host the image offsite, the site may automatically resize the image even when using the direct link, the best way to avoid this is to use scraps on dA.

:bulletblue: You should only use these codes in custom module widgets (the ones with the little notepad icon in the top left corner), as it can be more complicated to achieve the effect in widgets that display automatic content (not impossible but more advanced than I will cover here).

:bulletblue: All content of the module (writing, images, thumbs etc,) MUST be placed within the area that says "CONTENT HERE", otherwise it is covered over by the background. I recommend using custom box codes by SparkLum within this area because it neatly centres your content and provides a plain background for your text to sit over, thus making it readable whilst still having a fun background picture. I will cover those boxes in another blog entry.

The Code

<div class="popup2-moremenu"><div class="floaty-boat"><img src="DIRECT LINK TO IMAGE FILE HERE"></div></div><div class="gr-box">


Custom Backgrounds by SparkLum

See also:

Custom-box background tutorial by CypherVisor
Custom-box Background Tutorial by CypherVisor

Deviation-box background tutorial by CypherVisor
Deviation-box background tutorial by CypherVisor

deviantID-box background tutorial by CypherVisor
deviantID-box bckgrnd tutorial (OUTDATED) by CypherVisor
For backgrounds in the DeviantID module (effects of the code may be affected by upgrading to the new devID module but I cannot confirm it).

For another variation on background code.
Add a Comment:
LeFrenchAngora Featured By Owner Jun 23, 2014  Student Digital Artist
How do you change the size of a custom box?
A-p-p-l-e-j-u-i-c-e Featured By Owner May 8, 2014  Hobbyist Traditional Artist
how do you tile a background?
ClefairyKid Featured By Owner May 23, 2014
Last I knew, you couldn't tile a module background, only a journal background, because of the kind of code used to place a background in the first place. This makes the size of the background image you use for a module quite large, and you need to try and make sure it's long enough to allow for any extra stretch that additional content in the module may make. You should be able to easily take the tile and manually tile it out in an image editing program and save it all as one large image though.
A-p-p-l-e-j-u-i-c-e Featured By Owner May 23, 2014  Hobbyist Traditional Artist
oki thanks
KatieePandaa Featured By Owner Aug 20, 2013
could you tell me how to tile the background image??
panda037 Featured By Owner Jun 9, 2013  Hobbyist General Artist
is it possible to associate the html codes with a javascript and css(stylesheet)? if yes, can you teach us how? thank you!

im asking this because i want to put an icon in my box(social media icons) and i want to apply hovering effects but i can't do it. the codes appear to be a text -_- replies are so much appreciated.
ClefairyKid Featured By Owner Jun 27, 2013
I'm not sure that CSS effects are available in custom boxes, you are limited to < > tags for those, however, you can still use img tags to have the buttons without a hover effect. You can use those effects in a journal however, so you could design a journal skin to blend in with your profile and display the hover buttons that way.

Javascript is almost certainly not available in custom boxes, the closest thing you can do is use an embed tag and I only know of that being used for things like youtube player music and video at this point.
panda037 Featured By Owner Jun 28, 2013  Hobbyist General Artist
TT^TT thanks for the info.
Lady-Hannibal Featured By Owner May 19, 2013  Professional Digital Artist
Wow, thank you for posting this! It's very helpful in creating customs backgrounds!
ClefairyKid Featured By Owner May 21, 2013
Add a Comment: