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:
 
:iconareeonis:
Areeonis Featured By Owner 2 hours ago  Student Digital Artist
IT IS ABSOLUTELY NOT WORKING
Reply
:iconalexisrules14:
Alexisrules14 Featured By Owner Apr 2, 2016  Student Digital Artist
what about adding buttons? like i want to add buttons to my widget with backgrounds but i dont know how!
Reply
:iconjingle-jangle-bella:
Jingle-Jangle-Bella Featured By Owner Mar 29, 2016  Student Digital Artist
The text just kinda blends in with it, and I have to do it separately for each box. Rrrrreasons? How do you get the box on top of the BG
Reply
:iconarcticfox77:
Arcticfox77 Featured By Owner Mar 25, 2016  Student General Artist
It isn't working :(
Reply
:iconzpya:
Zpya Featured By Owner Mar 25, 2016  Hobbyist General Artist
I have used this, it really helped me!
Reply
:iconiviolaceous:
iViolaceous Featured By Owner Mar 23, 2016  Hobbyist General Artist
Okay I'm using this code, and it sends the background image over top a deviation I am trying to display.
Reply
:icondrazzonic:
drazzonic Featured By Owner 3 days ago
Same...
Reply
:icontoxicabomination:
ToxicAbomination Featured By Owner Mar 23, 2016  Hobbyist General Artist
Would it be possible to tile a smaller image for the background?
Reply
:iconaddicted2electronics:
Addicted2Electronics Featured By Owner Mar 19, 2016  Hobbyist General Artist
I did it on my "Newest deviations," but the actual deviations are not visible.
Reply
:iconcitydoq:
citydoq Featured By Owner Apr 15, 2016  Hobbyist General Artist
For the deviation box, you'll need Deviation-box background tutorial by CypherVisor . You won't be able to have it under the deviations though if I remember right.
Reply
:icondigitalevorian:
DigitalEvorian Featured By Owner Mar 17, 2016  Hobbyist Interface Designer
I'm curious,can this somehow be done with the "Favorites" tab?
Reply
:iconthechicrecruit:
TheChicRecruit Featured By Owner Mar 14, 2016  Student General Artist
I couldnt do it ;-;
Reply
:iconkittymagic0213:
KittyMagic0213 Featured By Owner Mar 21, 2016   General Artist
You have to have a core membership in order to be able to get the custom widget
Reply
:iconthechicrecruit:
TheChicRecruit Featured By Owner Mar 22, 2016  Student General Artist
I realized that after lol
Reply
:iconhibiscus-lime:
Hibiscus-Lime Featured By Owner Mar 16, 2016  Student General Artist
i think you have to be core
Reply
:iconjelli-muffin:
jelli-muffin Featured By Owner Mar 8, 2016  New Deviant  Digital Artist
When I copy and paste it shows up like this: pre07.deviantart.net/6647/th/p…
what did I do wrong?!!!!!!?
My drawing program is SAI
CypherVisor 
Reply
:iconcartooneypanda:
CartooneyPanda Featured By Owner Mar 17, 2016  Student Traditional Artist
Same for me.  Have you figured it out? (maybe you could help me?)
Reply
:iconjelli-muffin:
jelli-muffin Featured By Owner Mar 18, 2016  New Deviant  Digital Artist
Yes I have, and all I can say is that what I did was I kept trying and then on like the fifth or seventh try I finally got it and I was so happy because now it's all over my profile. So I'd recommend just keep trying :-)
Reply
:iconcartooneypanda:
CartooneyPanda Featured By Owner Mar 18, 2016  Student Traditional Artist
Ok, thank you ^^!
Reply
:iconjelli-muffin:
jelli-muffin Featured By Owner Mar 18, 2016  New Deviant  Digital Artist
X3
Reply
:iconhimitsuuk:
HimitsuUK Featured By Owner Feb 28, 2016   Photographer
:thumbsup:
Reply
:iconxerneasxx:
Xerneasxx Featured By Owner Feb 19, 2016  Hobbyist
;-; yehs 
Reply
:iconglitcher:
glitcher Featured By Owner Feb 19, 2016  Professional Digital Artist
This doesn't work for me. Basically I have a tablecloth pattern that I want to repeat (not stretch... repeat) as a background in an existing DA box like Favorites. Not only does this code fail to repeat the pattern, but it superimposes the image over the Favorites thumbnails. How do I fix this?
Reply
: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
:iconshawn1013:
shawn1013 Featured By Owner Feb 16, 2016  Hobbyist Digital Artist
Hi, idk if you already fixed it or not,.
But try adding * height="(add size here like 1000 2000 or something, idk how but I always just keep typing the size until it's fully covered .xD) "
And width="(add size again )"

After the image link ends with ( " ) before the link reaches " > " ( on the <img = * link * )
Aaah I'm so bad at explaining stuff :iconlazepoolplz:
My explanation must be so confusing :iconlazepoolplz:
Reply
:iconcutesweetshop:
CuteSweetShop Featured By Owner Feb 16, 2016  Student Artist
ahh i understand that ^^ haha i'll try that.. don't worry, i do got confused first 30 secs but i understand.. :) thank you!
Reply
:iconshawn1013:
shawn1013 Featured By Owner Feb 16, 2016  Hobbyist Digital Artist
You're welcome happy CODING! QWQ
Aaah I knew i made u confused omai :iconpapcryplz:
Reply
:iconcutesweetshop:
CuteSweetShop Featured By Owner Feb 18, 2016  Student Artist
haha no problem xD i do that too sometimes and just ended up saying "forget it" QvQ
Reply
:iconshawn1013:
shawn1013 Featured By Owner Feb 18, 2016  Hobbyist Digital Artist
Oh haha xD
Ist awesome that your decorating your page though QwQ
Reply
:iconcutesweetshop:
CuteSweetShop Featured By Owner Feb 19, 2016  Student Artist
haha thank you ^^ i'm still too lazy to fix the background tho.. maybe later xD
Reply
:iconshawn1013:
shawn1013 Featured By Owner Feb 19, 2016  Hobbyist Digital Artist
You're welcome ! qwq Oh haha I see XD Well GOODLUCK!
Reply
(1 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 Traditional 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
Add a Comment:
 
×





Details

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

Stats

Views
408,722 (94 today)
Favourites
10,958 (who?)
Comments
3,143

License

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