Shop Mobile More Submit  Join Login
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:
 
:iconzwaa:
Zwaa Featured By Owner Feb 1, 2016  Student Artist
Thank-you!
Reply
:icongunsweat:
gunsweat Featured By Owner Jan 30, 2016
how can you tile a bg image in the code?
Reply
:icontisha2302:
Tisha2302 Featured By Owner Jan 29, 2016  Hobbyist General Artist
It Worked!! Thank you sooo much for making this ^^
Reply
:iconlingling-arts:
LingLing-Arts Featured By Owner Jan 27, 2016  Hobbyist Digital Artist
doesnt work
Reply
:iconcutesweetshop:
CuteSweetShop Featured By Owner Jan 19, 2016  Student Artist
what to do if the image for the background didn't fully cover the widget? i always had this space on the right and left of the image and that doesn't look very good
Reply
:iconarkin-fyrdraca:
Arkin-Fyrdraca Featured By Owner Jan 15, 2016  Hobbyist Digital Artist
The height code stopped working for me. ;-; any fixes for this?
Reply
:iconjeyjeymalkavian:
JeyJeyMalkavian Featured By Owner Jan 16, 2016  Hobbyist Digital Artist
me too
Reply
:iconfluffy-fly:
Fluffy-Fly Featured By Owner Jan 14, 2016  Hobbyist General Artist
super helpful thank you!
Reply
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jan 14, 2016  Hobbyist Photographer
I was just wondering... I have this code on my site lucytherescuedcat. It has worked great! This morning the stretching components just won't work? Has there been a change in the codes as to why it won't fully stretch out! Thanks so much!:-) 
Reply
:iconarkin-fyrdraca:
Arkin-Fyrdraca Featured By Owner Jan 15, 2016  Hobbyist Digital Artist
I'm having the same problem.  Worked fine at first, and it's been fine for weeks, but I just noticed it stopped yesterday or something.  Anyone have any fixes?
Reply
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jan 15, 2016  Hobbyist Photographer
I have not heard of any fixes except shorter custom boxes! :-( 
Reply
:iconsecretwanderlust:
Secretwanderlust Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
Ahh it doesn't work to me neither ; v ;
probably some change on the code,,,maybe :''D
Reply
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jan 14, 2016  Hobbyist Photographer
I was able to fix mine for now, I had to break it down in smaller boxes. The stretching code is what has been messed up! If I ever get mine working, I will drop you a line. Cute page too! Such a bummer! Thanks so much for the watch! :-) 
Reply
:iconsecretwanderlust:
Secretwanderlust Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
Ahh i wish i can fix mine!but the background is too smol!  :'''D
omg yes plz, my page looks so weird without background T v T

aHH THANKS!
cats are best form of life in the earth : D
Reply
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jan 14, 2016  Hobbyist Photographer
You're welcome! :-) 
Reply
:iconazurelly:
Azurelly Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
And I thought I'm the only one. My page I've worked for 3 days is now crashed x'D
The backgrounds don't stretch, my gallery button widget has turned into a scrollbox and my litle browse buttons with self-made shiny fonts has enlarged :'D
Reply
:iconsecretwanderlust:
Secretwanderlust Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
AHH
THANKS LORD !i thought i was an idiot who broken links with out touch them! :'''D
DAYUM brb! x'''D DA is destroying our pages!
Reply
:iconazurelly:
Azurelly Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
No you can check it out my page to make a picture of it. It's totally disordered as well x'D
Aww man, it's still inconvenient 'cause it means that I need to re-type my boxes .... and I have a lot :\
Reply
:iconsecretwanderlust:
Secretwanderlust Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
Yeh i see it :'''D
in my page too! 
aww i feel ya' dude! i have 8 boxes! i hope i don't have to write everything again :'''''T
Reply
:iconazurelly:
Azurelly Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
Uuh well. I do hope, too for my .... too many boxes haha :'D
I guess if I just copy the content between the main custom widget box code and replace it into the -hopefully- updated custom code then it might work. I just assume :I
Reply
:iconsecretwanderlust:
Secretwanderlust Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
i hope~
ah i try but no :'''')))
i hope this fix soon, my page is so weird with out the background
Reply
(1 Reply)
:iconcosnix:
Cosnix Featured By Owner Jan 14, 2016  Hobbyist Filmographer
AH I'M GLAD I'M  NOT THE ONLY ONE. ;0; Hopefully, this problem can be fixed soon...
Reply
(1 Reply)
:iconlucytherescuedcat:
lucytherescuedcat Featured By Owner Jan 14, 2016  Hobbyist Photographer
Thanks! Doesn't work! Tried everything! Oh well!:-( 
Reply
:iconsandpiper101:
sandpiper101 Featured By Owner Jan 13, 2016   Digital Artist
aww man, these are great. thanks so much :)
Reply
:iconcaryos:
Caryos Featured By Owner Edited Jan 10, 2016  Hobbyist General Artist
This doesn't work for me at all. The image goes inside the box and pushes all the text outside. Help please?

EDIT // nvm I got it
Reply
:iconbluflame219:
Bluflame219 Featured By Owner Jan 9, 2016  Hobbyist General Artist
it doesn't say URL but it says copy image and copy image address, both of which don't work. who knows a way around this?
Reply
:iconfluffy-fly:
Fluffy-Fly Featured By Owner Jan 14, 2016  Hobbyist General Artist
copy image address should be the same thing as copy URL. Are you using chrome? Because I'm pretty sure that it's just a chrome thing.
Reply
:iconamebaby:
Amebaby Featured By Owner Jan 4, 2016  Hobbyist General Artist
I dont get the "copy image URL" option and Im on chrome, what should I do?
Reply
:iconbiobreach:
BioBreach Featured By Owner Jan 4, 2016  Hobbyist Digital Artist
Just click "copy" and it copies the url
Reply
:iconamebaby:
Amebaby Featured By Owner Jan 4, 2016  Hobbyist General Artist
Thx OwO
Reply
:iconaoriichan:
Aoriichan Featured By Owner Jan 3, 2016  Hobbyist Digital Artist
Umm.. How do you put an image inside a content holder box?
Reply
:iconpenguinpotato:
PenguinPotato Featured By Owner Jan 4, 2016
you mean like this?
How To: Little box background in Custom Boxes by zara-leventhal
Reply
:iconaoriichan:
Aoriichan Featured By Owner Jan 4, 2016  Hobbyist Digital Artist
Hm, no, like when people have art work inside a content holder box including a description ; v ;
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 5, 2016  Hobbyist General Artist
Copy the thumb code from which ever art you want to use, paste it into where you'd put text, and see if it works then!
Reply
:iconaoriichan:
Aoriichan Featured By Owner Jan 10, 2016  Hobbyist Digital Artist
Aah <3 Thank you so much! It works nicely~
Reply
:iconpandariii:
PandAriii Featured By Owner Dec 31, 2015  Student
NOW IT FINALLY WORKS. Thankyu
Reply
:iconpandariii:
PandAriii Featured By Owner Dec 31, 2015  Student
Why it doesn't work in my profile :c
Reply
:iconthatfurryartist:
ThatFurryArtist Featured By Owner Dec 30, 2015  Hobbyist General Artist
I've used this code before an it worked perfectly, but I just tried using it and the floating box doesn't seem to work. You can see it on my profile page, is anyone able to help? :)
Reply
:iconcuteiemonster:
Cuteiemonster Featured By Owner Dec 28, 2015  Hobbyist General Artist
Okay

Confusing at first

but I think I got it now?
Reply
:icontraveling-light:
Traveling-Light Featured By Owner Dec 27, 2015  Hobbyist General Artist
Excuse me, but might you know how to include all images/gifs onto the background?
I'm having trouble with my page because for whatever reason the background only allows one image, it lengthens with the more images added, like it's supposed to, but won't show the other pictures.

I'd be thankful if you could help me out  ^^
Reply
:iconsilvri:
Silvri Featured By Owner Dec 27, 2015  Student General Artist
This is super useful! Thanks for making this!
Reply
:iconscarlett-phantom:
Scarlett-Phantom Featured By Owner Dec 27, 2015  Hobbyist General Artist
whenever I try to increase the width, nothing happens.
Reply
:icontraveling-light:
Traveling-Light Featured By Owner Dec 27, 2015  Hobbyist General Artist
Scarlett-Phantom You need to add more images/text as far as I'm aware to make the custom box longer/show more of the background.
Reply
:iconscarlett-phantom:
Scarlett-Phantom Featured By Owner Dec 27, 2015  Hobbyist General Artist
thank you!
Reply
:icontraveling-light:
Traveling-Light Featured By Owner Dec 27, 2015  Hobbyist General Artist
No problem  ^^
Reply
:iconscarlett-phantom:
Scarlett-Phantom Featured By Owner Dec 26, 2015  Hobbyist General Artist
can you put stuff on top of the image?????
Reply
:iconixuti:
Ixuti Featured By Owner Dec 26, 2015  Hobbyist Digital Artist
Thanks! It's so useful <3
Reply
:iconaijouhana:
aijouhana Featured By Owner Dec 24, 2015  New Deviant Hobbyist General Artist
Thanks for the turorial!
I just have one question, how do you make the background a recurring pattern?
Reply
:iconc-a-n-d-y-y:
C-A-N-D-Y-Y Featured By Owner Dec 19, 2015  New Deviant Hobbyist General Artist
Is this only core?
Reply
:iconhacchiato:
hacchiato Featured By Owner Dec 23, 2015
Yup
Reply
Add a Comment:
 
×




Details

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

Stats

Views
397,366 (19 today)
Favourites
10,676 (who?)
Comments
3,109

License

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