Shop Mobile More Submit  Join Login
Deviation-box background tutorial by CypherVisor Deviation-box background tutorial by CypherVisor

»»»»»»»»»»»»»»»»»»»»»»»»»»» 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 Featured Deviation widget in your profile or group page.

Source Code:

<div class="popup2-moremenu"><br><div class="floaty-boat"><img align="center" src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>

Code to stretch image (It works also 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"><br><div class="floaty-boat"><img align="center" width="1000" height="1600” src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>

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

Other tutorials

For custom-box widget:
Custom-box Background Tutorial by CypherVisor

For deviantID-box widget:
deviantID widget box customization tutorial by CypherVisor

Want to customize your profile page?

Check all my free resources + tutorials: [LINK]

Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks

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 send me a note

Add a Comment:
Wolfgangen Featured By Owner Mar 7, 2015  Hobbyist General Artist
My thumbnail got oversized :o (Eek) Any solution to this problem ?
Wreck-ItRalph Featured By Owner Feb 23, 2015  Hobbyist Traditional Artist
It doesn't fully work anymore and caused by dA admins.

Admin Response by Wreck-ItRalph
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
I think the issues with the image overflowing the box can be fixed by adding style="max-width: 100%" after class="floaty-boat" (inside the div element)
Luna-Nightfire Featured By Owner Feb 17, 2015  Hobbyist General Artist
the box for this is too small to fit the image and description could you possibly tell me how to fix this problem in extending the main box?
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
Check out the comment I just left above; leaving a reply on here so that you get a notification and are able to see it.
No-pe Featured By Owner Feb 16, 2015  Hobbyist Artist
i have a problem , it didn't work . 
Tasha9090 Featured By Owner Edited Feb 15, 2015  Hobbyist General Artist
I had a problem with my picture size issue being to big but then after trying to figure out a solution i saw to put width="500" in between img and src, it helped
LucyNickBakura Featured By Owner 1 day ago
thank you so much :hug: it works!
Tasha9090 Featured By Owner 1 day ago  Hobbyist General Artist
Your welcome ^_^
bexxasaurus Featured By Owner Feb 12, 2015  Hobbyist General Artist
I'm using the code that's not supposed to stretch the image, but my featured art is being stretched to fit on the entire widget.. any ideas why? :(
Droidigan Featured By Owner Feb 11, 2015  Student General Artist
But is there a way for your "newest deviations" box to have the deviations atop the background, so you don't have to edit your box everytime you upload something?
RippleArt Featured By Owner Edited Feb 16, 2015  Hobbyist General Artist
No :(
Snow-Fangs Featured By Owner Feb 1, 2015  Student Digital Artist
Doesn't work for me
LindseyStyles Featured By Owner Jan 29, 2015  Student Digital Artist
How do we change file size?
Sonikkudrawings Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
Something to add:
<div class="commentcount"><a href="DEVIATION URL#comments"><span class="iconcommentsstats"></span>X Comments</a></div>
You have to mannually update the number, though.
Liger-Inuzuka Featured By Owner Jan 19, 2015  Professional Traditional Artist
Good day
We are seeking reworking our profile visual design and have come across your many tutorials, may we say they are fantastic and resourceful. Albeit we have a single inquiry; after searching through some of your tutorials one thing we can not locate is a tutorial of how you created custom headers for your widgets on your front page. Is there an established tutorial we failed to find, if not could you explain please how you created those custom headers?

Thank you
penguinlove2506 Featured By Owner Jan 17, 2015  Hobbyist General Artist
Well everything is fine with the picture and all. But the featured deviation no longer shows up, it just shows the icon for a broken link. I think I broke something.
kitopia Featured By Owner Jan 17, 2015  Student Filmographer
Copy and paste
if your image is too over sized. Where your image url is, after the " put

width="ANY WIDTH" height="ANY HEIGHT"> to choose it to your wants
Rainbow-Kitten-Candy Featured By Owner Feb 7, 2015
omg thank you this helped so much!
Razska Featured By Owner Jan 21, 2015  Hobbyist General Artist
This tip was perfect -- thank you so much!! This was the exact problem I was having :hug:
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
May I just inform you that you're absolutely amazing oh my goodness! Seriously, I couldn't figure out how to get the resizing to happen to save my life. 
kitopia Featured By Owner Jan 18, 2015  Student Filmographer
ahhh thank you !!! : D just saw some people below confused and i thought id help! <3
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
Well I'm glad you did!! Yeah you've definitely saved HTML lives after this. :thumbsup:
MaroonMaverick Featured By Owner Jan 7, 2015  Student General Artist
for my first try, it work!!! yay! but thing is that when I put a description on it, it doesn't appear, maybe because of the size of my deviation? help! 
Izayas-Neko-nyan Featured By Owner Jan 6, 2015  Hobbyist Digital Artist
Thank you so much for this tutorial! :D

Could you make one for the "Newest Deviation" box background (The slideshow one)? Please :3
Ashravan Featured By Owner Edited Jan 4, 2015  Hobbyist Traditional Artist
It deforms the pic..O.o What did I wrong? :icondragonidleplz:

Well; could it be because I've the picture AND a customized text, so 800x800 is too less? 

(That's why the pic is only a link, because there is no space anymore? O.o)

Would be really glad you know the answer :aww:
KhaoticCuteness Featured By Owner Dec 29, 2014  Student Artist
I'm so sorry bout this but could you please tell me what I did wrong and how to fix it? I would really appreciate it thank you…
Captain-Starburst Featured By Owner Dec 27, 2014  Student General Artist
So I have this problem, Where Whenever, I add in the picture, Its over sized, and doesnt fit...
But other then that it works..
acchanchan Featured By Owner Jan 1, 2015  Hobbyist Digital Artist
i have the same problem (oMo;
elisexprincess Featured By Owner Dec 26, 2014
Please help ;d
crown-rachel Featured By Owner Dec 21, 2014  Hobbyist Digital Artist
all of my deviations from the image URL turn out too big and dont fit inside the custom box D: 
and if i use a deviation's thumbnail URL instead, the image is way too small.
i guessing this cant be fixed because of the original sizes of my deviations lol. i dunno. i tried to size it up the thumbnails in a journal and then copy that URL, but it just gave me the full original size.
hnnnng i just want a pretty profile xD
TheShiranja Featured By Owner Dec 7, 2014  Hobbyist Traditional Artist
I tried your tutorial here and I must say, it was my first time doing codes but I managed and even learned something new :D
Thanks very much for doing this.
However I used the Favourite Deviation widget to do this, but there is a huge space between the picture and the first box. I tried removing all breaks but I didn't change. What could cause this? (you'll see what I mean when you look on my profile)
xXEtienetteXx Featured By Owner Nov 10, 2014
To anyone who is having issues with their image being too big for the box:

Go to your desired deviation, hit the Edit button, and copy the URL from the thumbnail of the deviation.
This in a way, will 'resize' the image to a suitable standard.
FloydDowel Featured By Owner Nov 3, 2014
Its to big for me also for my box with no room
November-Wishes Featured By Owner Oct 27, 2014  Hobbyist Digital Artist
I can get the picture to show up just fine, (Thank you very much for these tutorials!), but for some reason the image is doubled..?… (The welcome picture)
janda9963 Featured By Owner Oct 26, 2014
the image is just slightly too big for the box with no room for the description pie susu dhian , what went wrong?
PuffCats Featured By Owner Oct 25, 2014  Student Digital Artist
I just have one question what do do you do when it's on sitback and theres no one picture to take the URL from
R35TART Featured By Owner Edited Oct 16, 2014  Hobbyist Digital Artist
Is there a way to make images repeat so I don't have to stretch them?
I have a pattern and it stretches to fit but looks ugly when I do that, how would I fix that?
R35TART Featured By Owner Oct 18, 2014  Hobbyist Digital Artist
Actually change the question,

I added a background but it keeps removing/overlapping my content box leaving behind my scrollbox.
How can I fix this?
Shina-K Featured By Owner Oct 16, 2014  Student General Artist
Will this work with featured Journals?
Safeyah-Raiwbow Featured By Owner Oct 15, 2014  Hobbyist Artist
Not background (Featured Deviation) :( , how to Featured Deviation background ?
Triplet99c Featured By Owner Oct 15, 2014
I am having a lot of trouble with this... All the backgrounds I pick are too short, the background covers up my writings below and the image is too big...
Razska Featured By Owner Oct 15, 2014  Hobbyist General Artist
I'm having the same issue as GamingGoru....the image is just slightly too big for the box with no room for the description, what went wrong?
Rabenfeder Featured By Owner Oct 13, 2014  Hobbyist General Artist
Hey, first off, thanks for he tutorial!
I however have a problem with adding a background to my "Newest Deviations" because whenever I try to add a text, it just gives me the background image without my actual art @@
Do I have to make thumbs for every single one of them (like I did for my 3 current deviations) or is there a way to only edit the background? :s
GamingGoru Featured By Owner Oct 11, 2014  Student Digital Artist
It's not working right for me. I copied my featured deviation's image URL without being in editing mode, added it to my code, and the image gets too big and it doesn't fit the widget box. It ends up looking like this: Problem with Proportion <-- (Click to view)
Am I doing something wrong?
cloudiex Featured By Owner Nov 5, 2014
The same thing is happening to me!!
urging Featured By Owner Oct 5, 2014
daaaaaaaaaang you are devoted to these commenters. props to you for all the work you put into your uploads!!
and thanks a bunch for doing them in the first place, because i hella appreciate these.
CypherVisor Featured By Owner Oct 6, 2014
It's my utmost pleasure! :thanks:
RMS-OLYMPIC Featured By Owner Sep 28, 2014  Hobbyist General Artist
This is lovely...will it work for a none-premium member?
Sorry if I missed something!
Add a Comment:


Submitted on
June 27, 2010
Image Size
1.1 MB


216,447 (16 today)
2,702 (who?)


Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.