HOME | DD
CypherVisor — Custom-box Background Tutorial
by-nc-nd
Published: 2010-06-23 21:01:34 +0000 UTC; Views: 573451; Favourites: 12564; Downloads: 0
Redirect to original
Description
»»»»»»»»»»»»»»»»»»»»»»»»»»» 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
SOURCE CODE:
Code to insert an image without stretching: (ORIGINAL CODE)
Body text here..
Code to stretch an image (It works as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :
Insert the width and height in the
EXAMPLE:
Body text here..
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:
Custom background for New deviation-box widget:
The content holder box used in this tutorial
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
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.
Related content
Comments: 3487
ahh, that's what happened to me ;o would you like me to send you the code i used?
👍: 0 ⏩: 2
Would you mind helping me? I cant seem to figure it out.
👍: 0 ⏩: 1
sure! should i note you the code?
👍: 0 ⏩: 1
Nvm i figured it out. Thx for offering to help me though! ^^
👍: 0 ⏩: 0
well, i have though a lot and i finally understood how it works... ^^''
Sorry for disturbing you.....
But thank you very much for helping me it means me a lot~~!!! ^^
👍: 0 ⏩: 1
ahh, ok! glad you figured it out <3 and np!
👍: 0 ⏩: 1
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 :/
👍: 0 ⏩: 0
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~
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
why does my bg keeps being cut off even if i got it from my stash? ):
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 0
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: .. this is the background I'm trying to get:
Any help would be hugely appreciated!
👍: 0 ⏩: 0
this
was so helpful
thank you so much ahh ;_;
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 1
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
👍: 0 ⏩: 2
The ideal size for a background would be around 850x3000pixels
👍: 0 ⏩: 0
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?
👍: 0 ⏩: 0
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...
👍: 0 ⏩: 1
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!
👍: 0 ⏩: 0
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 ;~;
👍: 0 ⏩: 0
I think deviantART needs to update their Custom Boxes on their website considering it doesn't work.
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
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...
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 1
is this updated for 2014? I dont know how to do the code.
👍: 0 ⏩: 0
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
👍: 0 ⏩: 2
See in the description. I have provided the code to stretch your background. It is under "Code to stretch an image"
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 1
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
👍: 0 ⏩: 1
It shows in the description, here:
Body text here..
That's the stretch code (might as well copy the code above and fill it in) so since your image is too small with the dimensions of "1920x1200" and you want to make it bigger to cover the whole box, try making the height bigger like putting "1500" or "2000" instead of the original "1200."
Oh and to make it bigger put < br > (close spaces) at the end of the code, but before the < /div> part. you can put as many as you need for how big you want the box to be.
👍: 0 ⏩: 1
Ahh! Thank you so much! it worked :'D
👍: 0 ⏩: 1
ahh good 
I was worried i might have gotten something wrong
👍: 0 ⏩: 1
It was fine 
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
awesome tutorial for create eye catching Background in Photoshop.This is helpful tutorial for me.thanks for sharing with us..!!!
👍: 0 ⏩: 1
It's my pleasure friend.
👍: 0 ⏩: 0
<= Prev | | Next =>