HOME | DD
CypherVisor — Custom-box Background Tutorial
by-nc-nd
Published: 2010-06-23 21:01:34 +0000 UTC; Views: 573539; 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 found a background that I want but
When I followed this it didn't work is it only
For windows 7 because I have windows 8 and it comes up different?
👍: 0 ⏩: 1
Nah. it should work fine in either one. I am using win8 and I see no issues.
👍: 0 ⏩: 1
well it doesn't seem to work for me :I
👍: 0 ⏩: 1
Hmm...
Are you doing what's told in tutorial step-by-step? You may read the previous comments and might find the issues addressed.
👍: 0 ⏩: 1
Can you please help me... Is it possible to use gif images in a custom box? You see, I keep resizing this image: media.tumblr.com/68972aea30c6b… to use for my background because it's perfect for the kind of theme I want but no matter how much I resize the image it always goes to a fixed size (Sometimes it will work in the preview but not when I look at it from my page). Is there any way to get the image in the background as the size I resized it to be? I have seen others do it so I has to be possible...
👍: 0 ⏩: 1
Use the stretch code from here: cyphervisor.deviantart.com/art…
And replace the below:
width="1000" height="1600"
with
width="100%" height="100%"
and see if it works
👍: 0 ⏩: 0
One question;
Is there a way to remove that white box in the background? So that it is only your custom bg entirely, with the text just there without the white box in the back of it? Thank you!!
👍: 0 ⏩: 1
Yes, just insert your text by replacing the "body text here.." part of code.
👍: 0 ⏩: 0
How can you make your background cover your entire box?
👍: 0 ⏩: 1
make a bg with large height.
👍: 0 ⏩: 1
oh ok great! Do you know of any program I can use to make a larger bg?
👍: 0 ⏩: 1
You can use GIMP (free tool) to create bgs..
or use PHOTOSHOP if you want an advanced one.
👍: 0 ⏩: 1
What if your box is too big and the picture is small?
👍: 0 ⏩: 1
It background picture won't cover the whole width/length.
👍: 0 ⏩: 1
I don't have Google Chrome or FireFox. What to do? :c
👍: 0 ⏩: 1
You can use any browser for this tut. To check on how to copy image links check here: Custombox F.A.Q. + Tips and tricks
👍: 0 ⏩: 0
Hey c;
When i put in my background code, it cuts off the image at the end of the box.
Is there a way for it to like shrink or something to fit the whole image?
👍: 0 ⏩: 2
to increase the size of your custombox use
tags at the bottom of the codes as many times you want.
👍: 0 ⏩: 0
Oh nevermind i got it! ^^
👍: 0 ⏩: 1
Could you plaease tell me Lieutenant Kyoheiiiiiii :0 ! Ive been wanting to know this for so long, to make an image "Fit to custombox" at all times, irrespective of the persons browser resolution. :0 please share (:
👍: 0 ⏩: 1
Haha actually i dont know x3
I just have my wallpaper cut off wherever the custom box does i just ignore it
Maybe asking people who know coding better can help you? c;
👍: 0 ⏩: 1
xD that's ok,
If I find out how it's done I'll let you know^^
But for your background, I know something that can help you. Your background looks smaller on the screen and doesn't take the entire box, Im guessing on mobile/tablet devices your background looks a little too big. you can throw this in your background's image tag. <*img src="BACKGROUND URL here" width="100%"> that way the background will always fit width wise ! c:
👍: 0 ⏩: 1
well thats pretty helpful, thank you! x3
👍: 0 ⏩: 1
once we've customized our background is there a way to place thumbs of deviations in it?
👍: 0 ⏩: 1
to increase the size of your custombox use
tags at the bottom of the codes as many times you want.
👍: 0 ⏩: 1
Do you know how to make an image background fit the entire custom box?
👍: 0 ⏩: 1
use the width="100%" and height="100%" property in the background image img tag...
👍: 0 ⏩: 0
Is it possible to have text in a custom box with a background, but no content holder box?
👍: 0 ⏩: 1
Yes, just write your content in the "body text here" part of the code.
👍: 0 ⏩: 0
How do I make the background image repeat?
👍: 0 ⏩: 1
You can't. It is not possible here.
👍: 0 ⏩: 1
Yeah, because inline CSS is disable to use in our pages.
👍: 0 ⏩: 1
Really useful, currently use this technique on my page!
Big thanks!
👍: 0 ⏩: 1
Cool! And you're welcome!
👍: 0 ⏩: 0
Goto your profile page>edit page there you'll find all the widgets to install. Select the "custom" widget and install in your page.
👍: 0 ⏩: 1
<= Prev | | Next =>