Shop Mobile More Submit  Join Login
×




Details

Submitted on
June 23, 2010
Image Size
852 KB
Resolution
800×3050
Link
Thumb
Embed

Stats

Views
326,195 (420 today)
Favourites
8,885 (who?)
Comments
2,902

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×
Custom-box Background Tutorial by CypherVisor Custom-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 Custombox module in your profile or group page.




Spanish translation of this tutorial


Tutorial fondo en caja Custom. by FanasY




SOURCE CODE:




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"/>


EXAMPLE:
<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)
------------------------------------------------------------------------------------------------------------------
http://fc07.deviantart.net/fs70/f/2013/227/0/1/demo_by_cyphervisor-d6i84qo.jpg



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: somrat.deviantart.com/gallery/…



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.
Add a Comment:
 
:icontoxicdusk:
ToxicDusk Featured By Owner 1 day ago  Hobbyist Digital Artist
whenever i put the codes in the picture comes up way smaller
Reply
:iconcasthavian:
Casthavian Featured By Owner 2 days ago  Hobbyist General Artist
Looks like shit. Doesn't work..
Reply
:iconteamlpsandacnl:
teamlpsandacnl Featured By Owner 5 days ago  New member
ok this is easy way
Reply
:iconredpadna:
Redpadna Featured By Owner Jan 18, 2015  Hobbyist Artist
I've been trying to add a deviantation to a custom box but it isn't working, help please
Reply
:iconredpadna:
Redpadna Featured By Owner Jan 18, 2015  Hobbyist Artist
Nvm it's fine now
Reply
:iconcarlykat:
CarlyKat Featured By Owner Jan 16, 2015  Hobbyist Traditional Artist
Im too stupid for this

please help DXX
Reply
:iconnorthstar2x:
northstar2x Featured By Owner Jan 14, 2015  Hobbyist Digital Artist
I have a question
I'm not sure how to add padding around the content box.
You can see that there's not much room between the bottom of the content box and the custom box, and I would just like to expand it a bit so it matches the spacing at the top of the box. 
I suppose that would just be centering the content box in the center of the custom box, right?
But how do I do that?
northstar2x.deviantart.com/
Reply
:iconbblaze-mikasa2d:
Bblaze-MiKaSa2D Featured By Owner Jan 14, 2015  Hobbyist General Artist
I think im making something wrong... 
It shows the background, but... When I want to put a stamp or button, it doesn't show. Someone help me please?
Reply
:iconrainbow-kitten-candy:
Rainbow-Kitten-Candy Featured By Owner Jan 12, 2015  New member
omg THANKS*Free Icon/Emote* Thank You Pusheen 
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 10, 2015  Hobbyist Digital Artist
I think i must've done something wrong, when i insert the background, the box wont show up and it's just see through, but it works fine without one? 
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 10, 2015  Hobbyist Digital Artist
nevermind! i figured out what i was doing wrong :)
Reply
:iconsamthefirewizard:
SamTheFireWizard Featured By Owner Jan 14, 2015  Hobbyist General Artist
Can you help me? To me it didn't work....

When i finish it become like this
Custom
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 14, 2015  Hobbyist Digital Artist
ahh, that's what happened to me ;o would you like me to send you the code i used?
Reply
:iconsamthefirewizard:
SamTheFireWizard Featured By Owner Jan 16, 2015  Hobbyist General Artist
well, i have though a lot and i finally understood how it works... ^^''
Sorry for disturbing you..... Onion Boy 6 


But thank you very much for helping me it means me a lot~~!!! ^^ onion yep Thank You..Onion 
Reply
:iconvulcaan:
vulcaan Featured By Owner Jan 16, 2015  Hobbyist Digital Artist
ahh, ok! glad you figured it out <3 and np!
Reply
:iconsamthefirewizard:
SamTheFireWizard Featured By Owner Jan 17, 2015  Hobbyist General Artist
Yea ^^
Reply
:iconangelofdarkness089:
AngelOfDarkness089 Featured By Owner Jan 6, 2015  Hobbyist Writer
I think i did something wrong because it doesn't work for me.
Gosh why is this so complicated?! dA need to change this >_<
I don't have the patience for stuff like this :/
Reply
:iconhuman-soda:
HuMaN-SoDA Featured By Owner Jan 4, 2015  New member Hobbyist Digital Artist
hiya, iv'e got my custom boxes working fine-
but is there a way to repeat the custom box background as
it is too small for the box ?

or would I just need to make it longer?

Thanks~
Reply
:iconm-lee08:
M-Lee08 Featured By Owner Edited Jan 4, 2015  Professional Traditional Artist
Okay sorry to bug. What if I do the size you say but it does not fill the hole box with the background image. It cuts off short no matter how big I make it. Is there a way to fix that. My size is 14400 by  14400.
Reply
:iconlittlegreencreatures:
LittleGreenCreatures Featured By Owner Jan 3, 2015  Hobbyist Traditional Artist
why does my bg keeps being cut off even if i got it from my stash? ): 
Reply
:iconfeartheunseen:
FearTheUnseen Featured By Owner Jan 3, 2015  New member
I have a question: 
I made all of my placeholder white backrounds (I was inserting them to know how big to make my custom box backrounds when i draw them) the same width (900 px) but different lengths, and they don't all fit the boxes the same way. I'm on a computer with a wide screen, so I don't mind how the first box on the left is, but all of the other boxes have larger gaps ;; I'm planning on making backrounds that I wouldn't want to be stretched. What do i do? 

I'm guessing that the length of the box for some reason likes to change how it fits in the box? 
Reply
:icontinylittlewatermelon:
TinyLittleWatermelon Featured By Owner Jan 3, 2015  Hobbyist Digital Artist
So I've been trying to get this working for the last half hour and it just doesn't work for me -,- I'm sure I must've messed up somewhere since all I see is this: Doesnt Quite Work For Me by TinyLittleWatermelon  .. this is the background I'm trying to get: Custombox Background by TinyLittleWatermelon
Any help would be hugely appreciated! 
Reply
:iconve-lisa-raptor:
Ve-LISA-Raptor Featured By Owner Jan 1, 2015  Student General Artist
this

was so helpful
thank you so much ahh ;_;
Reply
:iconunbeatablemeghan13:
Unbeatablemeghan13 Featured By Owner Edited Dec 28, 2014  Hobbyist Filmographer
I'm sort of confused on this.
I made a background for it and it don't cover all of the box. What do i do?
Mega Rayquaza by Unbeatablemeghan13
Reply
:iconenderwings909:
EnderWings909 Featured By Owner Dec 28, 2014
It's probably too small. I don't know the exact size you should make it, but experiment with the sizes and you should find one that fits right :)
Reply
:iconkyouseiri:
KyouSeiri Featured By Owner Dec 31, 2014
The ideal size for a background would be around 850x3000pixels
Reply
:iconunbeatablemeghan13:
Unbeatablemeghan13 Featured By Owner Dec 28, 2014  Hobbyist Filmographer
Ok :3
Reply
:iconenderwings909:
EnderWings909 Featured By Owner Dec 28, 2014
I'm glad to help :)
Reply
:iconnerdlebooyimi:
NerdleBooyimi Featured By Owner Dec 27, 2014  Hobbyist Filmographer
I've done the codes correctly, and it works for about a few minutes and then I get this ripped paper icon on my page where the background has been removed but the content holder box is fine. Is there an error with the system or something?
Reply
:iconsamthefirewizard:
SamTheFireWizard Featured By Owner Dec 27, 2014  Hobbyist General Artist
When i finished everything what i see is like this......

Custom
fc06.deviantart.net/fs71/f/201…


Did i do something wrong??? O.O
I have read comments and redone this few times but result is always the same through i do this step by step...
Reply
:iconcybernetic-skrillien:
Cybernetic-Skrillien Featured By Owner Jan 2, 2015  Hobbyist General Artist
If that's how the image originally looks all by itself , it's because it's landscape. If not, then either the text/images/boxes or whatever you are putting in are too small, or there's little amount.

And just to note, it's only for Custom Boxes...unless you have the codes for the other widgets, then I'm not too sure!
Reply
:iconxcaffineaddictx:
xcaffineaddictx Featured By Owner Dec 27, 2014
Hello I have a question my computer is windows 8 and I got to the step of copying the URL/location image on stash but the only copy option is copy the actual image, no URL
Please help If its possible, sorry for taking up time ;~;
Reply
:iconichigomurasaki:
IchigoMurasaki Featured By Owner Dec 26, 2014  Hobbyist Traditional Artist
I think deviantART needs to update their Custom Boxes on their website considering it doesn't work. :(
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
It does work. Otherwise you would not see the backgrounds in my widgets in my page. :) (Smile)

Possibly, the image link is not inserted in your code properly or you  might have used the code incorrectly.

Please check the tutorial again and use the code provided in the description.
Reply
:iconxxrainbowdubstepxx:
xXRainbowDubstepXx Featured By Owner Dec 26, 2014
uh? It didn't work >w<
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
It does work. Otherwise you would not see the backgrounds in my widgets in my page. :)

Possibly, the image link is not inserted in your code properly or you  might have used the code incorrectly.

Please check the tutorial again and use the code provided in the description.
Reply
:iconhunizzle:
Hunizzle Featured By Owner Dec 25, 2014  Student General Artist
it dont work 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
It does work. Otherwise you would not see the backgrounds in my widgets in my page. :)

Possibly, the image link is not inserted in your code properly or you  might have used the code incorrectly.

Please check the tutorial again and use the code provided in the description.
Reply
:iconmelverissa:
melverissa Featured By Owner Dec 23, 2014  Hobbyist Digital Artist
it does not work :(
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
It does work. Otherwise you would not see the backgrounds in my widgets in my page. :)

Possibly, the image link is not inserted in your code properly or you  might have used the code incorrectly.

Please check the tutorial again and use the code provided in the description.
Reply
:iconmelverissa:
melverissa Featured By Owner Dec 27, 2014  Hobbyist Digital Artist
alright thanks ^^

it did work later, but i have a little trouble fitting the images in the widgets. They get bigger than the widget and it looks really stupid...
Reply
:icongiggle-loves-fnafs:
Giggle-loves-FNAFs Featured By Owner Dec 22, 2014  Hobbyist Filmographer
doesn't work
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
It does work. Otherwise you would not see the backgrounds in my widgets in my page. :)

Possibly, the image link is not inserted in your code properly or you  might have used the code incorrectly.

Please check the tutorial again and use the code provided in the description.
Reply
:icongiggle-loves-fnafs:
Giggle-loves-FNAFs Featured By Owner Dec 27, 2014  Hobbyist Filmographer
is this updated for 2014? I dont know how to do the code.
Reply
:iconmeiima:
Meiima Featured By Owner Dec 19, 2014  Student General Artist
I have a question.
I have this background that I really like, but its too short :(
I want it to cover the whole custom box but when I write more content, it cuts off. Any help of how I can stretch it?
The Dimension is 1920x1200
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 26, 2014
See in the description. I have provided the code to stretch your background.  It is under "Code to stretch an image"
Reply
:iconmeiima:
Meiima Featured By Owner Dec 26, 2014  Student General Artist
Thank you! 
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Dec 28, 2014
yw :)
Reply
:iconphoenixgirl1:
PhoenixGirl1 Featured By Owner Dec 26, 2014  Hobbyist General Artist
did you use the stretch code? try making the dimensions bigger then it already is.

Also if the box is to small and the words go off of it you probably need to add in more
tags, those make the box bigger with more space.
Reply
:iconmeiima:
Meiima Featured By Owner Dec 26, 2014  Student General Artist
I havent used the stretch code. what is it? I tried resizing it but it wont work.

How do you make the box bigger? //OTL Im so sorry I ask to many questions 
Reply
Add a Comment: