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:
 
:iconxxmissmangaxx:
xXMissMangaXx Featured By Owner 6 days ago  Hobbyist General Artist
This was super helpful! Thank you so much! :D 
Reply
:iconshudoptable:
ShuDoptable Featured By Owner Mar 19, 2015  New member Hobbyist Digital Artist
thanks a lot for this tutoriel!!
Reply
:iconstarlight1514:
Starlight1514 Featured By Owner Mar 11, 2015  Hobbyist Traditional Artist
I did this, but It doesn't make it the background, it just makes it just another image. Help!
Reply
:iconguardians-of-jarkita:
Guardians-of-Jarkita Featured By Owner Mar 11, 2015  New member Professional Digital Artist
Super helpful! Thanks :D
Reply
:iconbix-adoptables:
Bix-adoptables Featured By Owner Mar 8, 2015  New member Hobbyist General Artist
I am trying to do this for a group aND IT JUST DOESN't FUCKING WORK
Reply
:icononehitok:
onehitok Featured By Owner Mar 10, 2015  Student Traditional Artist
XDDDDDDDDDDDDDDDD
Reply
:iconbix-adoptables:
Bix-adoptables Featured By Owner Mar 10, 2015  New member Hobbyist General Artist
R00d block and reportd :::''' (((( I kno the dA tem . they will delete ur acount :::: ))
Reply
:iconkatrinabonebrake:
KatrinaBonebrake Featured By Owner Mar 12, 2015  Hobbyist Digital Artist
ROFL.....
Reply
:icononehitok:
onehitok Featured By Owner Mar 10, 2015  Student Traditional Artist
gmo
Reply
:iconsunsetkittyartist:
Sunsetkittyartist Featured By Owner Feb 27, 2015
didnt exactly work...
Reply
:iconlenazoni:
LenaZoni Featured By Owner Feb 21, 2015  Student Digital Artist
Yay!

Now i know how i can make my own journal skin!
Reply
:iconmidnight3795:
Midnight3795 Featured By Owner Feb 22, 2015  Student Digital Artist
This doesn't work with journal skins, at least I don't think it does.
Here's a guide for journal skins. Basic CSS Tutorial by DragonX141  
Reply
:iconlenazoni:
LenaZoni Featured By Owner Feb 22, 2015  Student Digital Artist
Oh ok thanks
Reply
:iconkojiana:
Kojiana Featured By Owner Feb 20, 2015
Thanks a lot ! Handshake 
Reply
:iconthunderztorm:
Thunderztorm Featured By Owner Feb 18, 2015  Hobbyist General Artist
How do you use purchased deviantART backgrounds?
Reply
:iconnightmare-curse:
Nightmare-Curse Featured By Owner Feb 18, 2015  Hobbyist Digital Artist
you are AMAZING!! Thank you!
Reply
:iconbattlefairies:
BATTLEFAIRIES Featured By Owner Feb 17, 2015
Thank you very much for this!
Boxbackground Screenshot1 by BATTLEFAIRIES
I'll make sure to donate some points. Cheers!
Reply
:iconmidnight3795:
Midnight3795 Featured By Owner Feb 13, 2015  Student Digital Artist
How do I change the text color?
Reply
:icondj2390:
Dj2390 Featured By Owner Feb 13, 2015  Hobbyist Digital Artist
This isn't working. the instead of the background, the link to the image appears at the top. 
Reply
:iconguineaarts511:
GuineaArts511 Featured By Owner Mar 18, 2015  New member Hobbyist Digital Artist
I have that same problem.
Reply
:iconwillow-moonmaiden:
willow-moonmaiden Featured By Owner Feb 12, 2015  New member Hobbyist Digital Artist
Thank you so much! I'm using your Pink Hearts background and I am absolutely loving it! Thank you Thank you! This has been incredibly helpful~! :tighthug:
Reply
:iconvapolord:
Vapolord Featured By Owner Feb 12, 2015  Hobbyist Digital Artist
I want to ask what I should do If I want to have my text start  on the very left. With this kindoff box that gets made in this code, the text and the picutures that come after are limited to a certian width. But if I want to have my text start on the very left, I would have to change the "invisible" borders from stopping me. I just want to recreate the normal profile look, just with a dark background and white text. But I won't happen as long as the text will not start closer to the left. Anyone help? I've been a premium member for a month or so now, and I just didn't have the nerves to figure out this shit yet. Would be cool if someone could help me.
Reply
:iconsaltyarts:
SaltyArts Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
What exactly is custom box
and how do you use it?

Is it Premium exclusive?

Anyone ?
Reply
:iconstarisfluffeh:
starisfluffeh Featured By Owner Feb 9, 2015  Hobbyist Digital Artist
Yes, a Premium Membership gives you more opportunities with DA. A Custom Box is one of them, You can either get a Premium Membership by paying money, or with points.
Reply
:iconsaltyarts:
SaltyArts Featured By Owner Feb 10, 2015  Hobbyist Digital Artist
Thats cool to know
Reply
:iconfrosbie:
frosbie Featured By Owner Feb 8, 2015  Student Digital Artist
where on the right is the custom-box?
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
thank you this was so useful :meow:
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 5, 2015  Professional General Artist
I keep doing something wrong but I have no idea what..

Everytime when I put the code in the description box the image is in front of everything, or it's put as another image in the box but never as a background..
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 6, 2015  Hobbyist General Artist
did you put the code at the beginning?
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 6, 2015  Professional General Artist
I've got the code like this:

<dic class+"Floaty-boat"><img src="fc06.deviantart.net/fs71/f/201…">


But as smart as I am.. I have know idea what "Floaty-boat" and "gr-box gr-genericbox" stands for. So maybe that's the problem.
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 9, 2015  Hobbyist General Artist
its supposed to be
<img src="YOUR LINK">

!!

i dont know what they stand for either, but i know they should be in the code!
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 9, 2015  Professional General Artist
I've tried it but then I just get the picture in the description  instead of in the background..
Reply
:iconunstabie:
unstabIe Featured By Owner Feb 9, 2015  Hobbyist General Artist
put the code at the top of the box, have you done that?
the box for the custom box should be after that code.
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 10, 2015  Professional General Artist
I don't think I fully understand what you mean.
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
that stuff doesn't matter, you don't change it. All that matters is the image url and the body text. (i dunno what that stuff is either...) Als o did you right click on the image itself and click copy image url or did you copy the website url? You have to copy the image url.
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 7, 2015  Professional General Artist
Oh okay so that's not the problem then.
No, I've copied the image url. I also tried the website url but that doesn't work either.
Reply
:iconrippleart:
RippleArt Featured By Owner Feb 7, 2015  Hobbyist General Artist
oh um... mine was doing that at first but then when i added a bunch of text it magically started working
Reply
:iconibolyacolorhead:
IbolyaColorHead Featured By Owner Feb 8, 2015  Professional General Artist
Okay, maybe I have to try that too.. 
Reply
:iconask-snowthedachsund:
Ask-SnowTheDachsund Featured By Owner Feb 3, 2015  New member Student Artist
IT WORKS IT WORKS! snowfanclub.deviantart.com/
Reply
:iconxxseroliousxx:
XxSeroliousxX Featured By Owner Feb 2, 2015  Hobbyist Digital Artist
how do you make the box translucent?
Reply
:iconawesomestar2002:
Awesomestar2002 Featured By Owner Jan 31, 2015  Hobbyist Filmographer
But how do you get to the custom box thing?
Reply
:iconawesomestar2002:
Awesomestar2002 Featured By Owner Jan 31, 2015  Hobbyist Filmographer
This helps a lot thank you :)
Reply
:iconnarutocrypt:
NarutoCrypt Featured By Owner Jan 31, 2015  Hobbyist Digital Artist
how come it didn't work? :/ I did all that you said, I have chrome, I uploaded the image to stash, I copied the image url, and all that happened, was the image url appeared without the picture. something's not right here...
Reply
:iconnarutocrypt:
NarutoCrypt Featured By Owner Jan 31, 2015  Hobbyist Digital Artist
how come it didn't work? :/ I have chrome, I uploaded the image to my stash, I copied the image url, I posted it in the box, and all it has is the url of what I pasted showing up. something's not right here...
Reply
:iconthetriforcebearer:
thetriforcebearer Featured By Owner Jan 29, 2015  Student Digital Artist
Is it possible to only have the background?
Reply
:iconsonikkudrawings:
Sonikkudrawings Featured By Owner Feb 7, 2015  Hobbyist Digital Artist
That means the background is in front of the rest of the content. Maybe you´ve misplaced it in the code.
Reply
:iconthetriforcebearer:
thetriforcebearer Featured By Owner Feb 7, 2015  Student Digital Artist
I made something that somewhat worked already.

I was asking that question as it's my goal, not an error :3
Reply
:icontoxicdusk:
ToxicDusk Featured By Owner Jan 27, 2015  Hobbyist Digital Artist
whenever i put the codes in the picture comes up way smaller
Reply
:iconcasthavian:
Casthavian Featured By Owner Jan 26, 2015  Hobbyist General Artist
Looks like shit. Doesn't work..
Reply
Add a Comment:
 
×




Details

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

Stats

Views
341,313 (68 today)
Favourites
9,213 (who?)
Comments
2,953

License

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