HOME | DD
CypherVisor — Custom-box Background Tutorial
by-nc-nd
Published: 2010-06-23 21:01:34 +0000 UTC; Views: 573550; 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
I have the ame problem but im in chrome and save image as URl and it still does it
👍: 0 ⏩: 1
Ofcourse, it will be BECAUSE YOU ARE COPYING THE URL ADDRESS OF THE PAGE and NOT the direct-image-url. You should use the option "Copy image URL" in chrome.
👍: 0 ⏩: 1
I WAs copying the img URL but I got it o work in the end
👍: 0 ⏩: 1
THANK YOU SOOOO VERY MUCH for making this 
👍: 0 ⏩: 1
It's my pleasure. You're most welcome!
👍: 0 ⏩: 0
What code do you use to repeat the image vertically? >.<
👍: 0 ⏩: 1
You cannot. You need to make a bg of your desired length and then use it.
👍: 0 ⏩: 1
Awww... is that so...
OTL
Can you tell me what is the exact length (if there is) of the custom box if I were to make my own BG?
👍: 0 ⏩: 1
Well, there isn't an exact length. You need to figure out how long do you need for yourself. To be on a safer side, you can make it to about 1500px to 2000px may be.
👍: 0 ⏩: 1
Alright, I think I'll try that.
Thanks for replying and for sharing this tutorial!
👍: 0 ⏩: 1
Okya, thank you! This helped a lot!
👍: 0 ⏩: 1
Follow, the steps the thoroughly and I am sure you'll get it.
👍: 0 ⏩: 0
Thank you so much for this!
How do I put a picture into it? x
👍: 0 ⏩: 1
Please check this journal for Custombox F.A.Q. + Tips and tricks
Thanks
👍: 0 ⏩: 0
thank you so much , this tutorials it So helpful !
👍: 0 ⏩: 1
I am glad that I could be of your help!
👍: 0 ⏩: 0
where can i find the "custom box?"
👍: 0 ⏩: 1
Goto "Edit page" top right corner of your profile page. There search for in the gallery menu below and you should see the custom widget.
👍: 0 ⏩: 1
How can i find the code to make it work? I use Torch not Firefox and such...
👍: 0 ⏩: 1
The code is in the description of this tut. More codes can be found in my gallery.
👍: 0 ⏩: 0
nevermind, I got it figured out ^.^
thank you for this amazing tutorial, as I'm still learning code
👍: 0 ⏩: 1
Hi, I have large custom boxes- I don't know if the image is too small or I'm doing something wrong, but it doesn't fill the whole box 
👍: 0 ⏩: 0
Hey there on the <*img src="inserct url" width="insert number"> tag if you put in 100% for the number the image will stretch respectively according to the viewer's screen size. So, if 1 viewer has a 800 px size box and another user has a 1400px sized box due to screen resolution and size of screen the image will touch both edges of the box. This also works with patterned and picture images as far as I can tell.
👍: 0 ⏩: 2
Omg can you please teach me sensei, Im trying to do it for an image, to make it "Fit to box" but when I go width="100%" it shrinks my image down to a much smaller size. Idk why and when I do height=100%" that works, it makes the height fit, while the width of the image gets cut out from the box a little. I tried using both height and width 100% but the width is just shriking my image down :C
👍: 0 ⏩: 1
it would only shrink it down if you are not setting the image up as a background for the box.
<*div class="popup2-moremenu">
<*div class="floaty-boat"><*img src="URL here" width="100%">
<*div class="gr-box gr-genericbox"><*span class="smbutton-purple popup2-clear"><*div class="text">
<*div class="h">
box information, if the image is just then it will fit it to the edges of the little boxes and maximum width of the words.
Though this will give you a white lettering in your box which is good for darker backgrounds. Be sure to remove all the * marks when using it though.
👍: 0 ⏩: 1
Omg thank you for the detailed help !
👍: 0 ⏩: 0
Yes, it will stretch automatically but it wouldn't help in repeating a pattern image (if you are using it).
👍: 0 ⏩: 1
this is very true, for patterns there needs to be an accpted repeat image code on DA ... at least i think so. For solids or images like I have on my profile the 100% width works really well though
👍: 0 ⏩: 0
This was amazingly helpful thank you!
👍: 0 ⏩: 1
Thanks a lot for this tutorial~!!!
👍: 0 ⏩: 1
You're most welcome dear!
👍: 0 ⏩: 0
hello, this tutorial was very helpful! i am having a bit of a problem with it though... i add the source code and insert my pictures URL, but whenever i finish that the actual background goes in front of any text, picture of anything else i want to be in that custom box :s any help would be much appreciated! <33
👍: 0 ⏩: 2
It is perfectly normal. You just need to copy the existing content and re-write your content in the "body text here.." part of the code.
👍: 0 ⏩: 1
thankyou very much for the help, its working!! these types fo things you upload are very helpful!! <33
👍: 0 ⏩: 1
Cool. I am glad that I could be of your help. Enjoy!
👍: 0 ⏩: 1
oh gosh, i'm sorry, i've been such a fool!! I see why the 'body text here' is there- its working fine. thanks for the tutorial anyways!!
👍: 0 ⏩: 0
I use a custom type of content holder and I can't get it to work, the background goes over the box, how do I fix this?
👍: 0 ⏩: 1
Have you check this: Custombox F.A.Q. + Tips and tricks
👍: 0 ⏩: 0
<= Prev | | Next =>