HOME | DD
CypherVisor — Custom-box Background Tutorial
by-nc-nd
Published: 2010-06-23 21:01:34 +0000 UTC; Views: 573553; 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
Omfg thank you so much for this tutorial, I was so lost without it
👍: 0 ⏩: 1
It's my pleasure. You're most welcome!
👍: 0 ⏩: 0
Let's say I have a seamless texture pack I want to use, and it doesn't work to either way mentioned above. Is there any way I can duplicate it over and over again next to each other?
👍: 0 ⏩: 1
You cannot repeat the bg image.
👍: 0 ⏩: 1
Hmm that's too bad. I'll find another one then!
👍: 0 ⏩: 1
so I've been playing around with the coding a bit and cannot for the life of my get the background image to anchor to the center rather than to the right side of the image. Like if you use an image that is larger than the space provided it take the top right corner and anchors it to the top right corner of the space available. I would like to use an image that has people in the middle of it and I don't want the people to be misplaced on screens/browsers that are either smaller or larger than my own.
Do you know how to change the anchoring position for the backgrounds?
👍: 0 ⏩: 1
nevermind that ... I figured out that if you set the background image width to "1000" that it adjust for screen size. I believe the coding that DA did set 1000 width as the max width for the frame. I have two different size screens that I use depending on where I am at at the time. so the code <*img src="URL" width="1000"> will give you a full width background no matter your screen size as the background on custom boxes. Anything smaller than that is porportional to the full width I do believe.
And with the images inside boxes of the custom widget anything wider than "400" seems to stretch the image's length rather than leaving it porportionate to the actual image size.
👍: 0 ⏩: 0
How do you make the bg to cover the whole custom box area? ~thx
👍: 0 ⏩: 1
that would be adding the witdh="1000" into the img src brackets < > though 1000 is my standard width on this computer for the boxes when I have my browser on full screen. On my older computer the width is 800, so it depends on the computer screen size and how the person views it, if you don't care about your viewers seeing the same sized image as you then just set it to your width.
👍: 0 ⏩: 1
Thank you so much <3
👍: 0 ⏩: 1
oh I just realized that when you set the width of the background to 1000 it adjust for screen size ... I switched to another computer with a smaller screen and my images set at 1000 width look the same as they do on my big screen computer.
👍: 0 ⏩: 1
Haha oh well, a page is a page! Thank you though! :3
👍: 0 ⏩: 1
God this is so confusing. Where do you even put the background URL in when I placed it in, it just blocked my featered picture.
👍: 0 ⏩: 1
where it says "url" inside the img src bracket < > remove the letters url and put in your own background url. it is very clearly stated in the image. it helps to have a basic understanding of html coding before attempting this as well.
👍: 0 ⏩: 0
I tried it on a featured deviation widget and all it does is cover the deviation with the background picture. What am I doing wrong?
👍: 0 ⏩: 1
there is a different way to do it with featured deviation widgets ... you have to use the custom widget and then when you get to the insert text here section of the code you copy and paste the featured deviation url (not the fave.me code the one you get from right clicking on the actual full sized image) you wish to feature.
👍: 0 ⏩: 1
GAH 
👍: 0 ⏩: 1
Hmm...
I can't tell about Macs... I am not used to them.
👍: 0 ⏩: 1
👍: 0 ⏩: 0
excuse me- i've used this tutorial, and it worked fine c: BUT i want to change the color of my text- how exactly do I do that?
i have the 'code' for the color, but im not sure on where to insert it in that link.
CODE:
TEXT HERE
👍: 0 ⏩: 1
Check this to change font color: cyphervisor.deviantart.com/art…
👍: 0 ⏩: 1
I have a question.
Sorry I can only reply and can't comment, stupid phone, but still:
If I was a premium member before and 'fav deviation' widgets are still on my page, can I install backgrounds into them?I did this before and it was hard, I just want to know will I be banned for this or anything?))
Thanks! Your tutorials are the best!
👍: 0 ⏩: 0
What are you confused with?
👍: 0 ⏩: 1
it says to put the image link in the image link?
👍: 0 ⏩: 0
It doesn't work on groups like on profiles. when I do it the custom don´t use the image as a background but as a normal image. how can I solve it???
👍: 0 ⏩: 1
It works. I have just checked it now to confirm. Please check the code that you are entering once again.
👍: 0 ⏩: 1
i don't know why but the code is exactly the same but it doesn't work. look for yourself streetart-is-art.deviantart.co…
👍: 0 ⏩: 1
that would be because the group is not a super group, a group must be a super group in order to use the coding correctly.
👍: 0 ⏩: 0
You need to be a premium to get one.
👍: 0 ⏩: 1
I´ve made all how you say, but it doesn´t work :/
Instead of those links
I get that
fc04.deviantart.net/fs71/f/201… ......
I dont know what I´m doing now. I hope you can help me :/
👍: 0 ⏩: 1
Don't type your code in the comment here because I can't see it.
Rather may be send me the code in note or sta.sh. I'll give it a peek when I get time.
Thanks
👍: 0 ⏩: 1
i think she means it shows up that way, not that is the link to what it looks like.
👍: 0 ⏩: 0
Thanks, Mister! I really appreciate it! Merci, merci, merci!!!
👍: 0 ⏩: 1
You're most welcome hun!
Enjoy!
👍: 0 ⏩: 1
everything gets hidden behind the background whenever I try.
👍: 0 ⏩: 1
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
ok! I think I get the idea now. Im new to the whole premium membership thing XD
👍: 0 ⏩: 0
Good tutorial, thanks for sharing
👍: 0 ⏩: 1
It's my pleasure!
👍: 0 ⏩: 0
Thank you for this tutorial!!!!!
👍: 0 ⏩: 1
<= Prev | | Next =>