HOME | DD

DeathTripp — Custom Box Background Tutorial

Published: 2010-01-28 18:10:12 +0000 UTC; Views: 158052; Favourites: 5080; Downloads: 1472
Redirect to original
Description EDIT 2 Okay, I am aware that DeviantART has changed a little since I did this tutorial...and I haven't had a change to update it yet and include gallery BG's...but please bare with me...

If you aren't able to get the right URL by just "clicking download" on your BG image, then please do the following

IF YOU ARE USING FIREFOX:

Click Download on your BG Image that you want to use...
Next right click and click "View Image" (the image should now refresh or open in another window)
The URL that you need should now be at the top, paste this code along with the Custome BG code into your box and follow the rest of the instructions.

(or a shorter way which I haven't tested yet: right click, copy image location, and you get the link you need.)

IF YOU ARE USING INTERNET EXPLORER:

Click download on the image and then click "View Sorce".

IF YOU ARE USING GOOGLE CHROME:

Click download on your BG imagine, then right click the image, and copy the URL. (thanks to ~http //silvershadowhdgehog: for this info! ).

------------------------------------------------------------------------

Next highlight the text between the inverted commas

src="HIGHLIGHT THIS TEXT">

Like this - [link]

This is the URL you need to use! Now follow the rest of the steps in the tutorial!

I hope that this helps!

-----------------------------------------------------------------------

EDIT Please refer to the original sorce of the CSS codes for more information on the backup account for Commander-Luminaire here --> ~Backup-Lunari Thank you
-----------------------------------------------------------------------
Ever wanted to know a simple way of changing the background colour or design in a custom box on your DA page? Well here you go....Originally requested by ~Chibi-Zelly but I thought I should upload it for all of you to see! <3

Special Thanks to *KiwiesRuleXD because she was the one who taught me how to do this cool trick! <3 Thank you!

Simply download/read the tutorial above and use the code below!! and if you are feeling generous, if you use it please +fave it so that others can find it too! Enjoy!

NOTE this code won't work in gallery/deviation boxes...you need a more complicated code to do this...and I don't know how yet...

also some background images will need to be longer than 1600 pixels....this is just a rough guide...because the more stuff you put in your custom box, the longer it gets...so your image may have to be longer.

-----------------------------------------------------------------------
THE CODE

<div class="popup2-moremenu"><div class="floaty-boat"><img src="IMAGE URL GOES HERE" />>>
>

THE STUFF IN YOUR CUSTOM BOX GOES HERE

>

-----------------------------------------------------------------------

(Special Thanks to ~Internet-cafe for giving me the code with "breaks" so that people don't have to get rid of the annoying stars * <3 Thanks!! =3)
Related content
Comments: 1030

DeathTripp In reply to ??? [2011-06-13 10:35:53 +0000 UTC]

did you download the deviation and then right click on the image and click "view image"? this loads it in a different window with the URL/image source.

👍: 0 ⏩: 1

Kaspiian In reply to DeathTripp [2011-06-13 22:26:16 +0000 UTC]

oooohhhhhhhh..........ill try that then, thanks!

👍: 0 ⏩: 0

HikariYamiKage In reply to ??? [2011-06-07 00:59:39 +0000 UTC]

That code wont automatically repeat, will it? o - o I know the width of the boxes does changed based on your moniter size/screen resolution. I need it to repeat...... >_> Rather than an img src could I put it as directly the background of the divbox? If so, would it be that class=gr-box or classopup2-moremenu?

👍: 0 ⏩: 1

DeathTripp In reply to HikariYamiKage [2011-06-07 13:56:16 +0000 UTC]

it doesn't repeat...if you need it to be wider you must make the background image wider and submit it the same way. However you are probably right in thinking that a different code could possible repeat the background...but I don't know what code it would be unfortunately..sorry ):

👍: 0 ⏩: 1

HikariYamiKage In reply to DeathTripp [2011-06-07 14:54:03 +0000 UTC]

Ah....Alright, thanks anyways. :D

👍: 0 ⏩: 0

beardswin In reply to ??? [2011-05-31 06:46:07 +0000 UTC]

oh this is a brilliant little guide well done

👍: 0 ⏩: 1

DeathTripp In reply to beardswin [2011-05-31 14:31:27 +0000 UTC]

thanks ^^ I plan to update it soon hopefully!

👍: 0 ⏩: 0

Ani-chan13 In reply to ??? [2011-05-22 23:09:38 +0000 UTC]

It still confuses me to no end, but I think I can manage.... Thanks a lot.

👍: 0 ⏩: 1

DeathTripp In reply to Ani-chan13 [2011-05-31 14:31:47 +0000 UTC]

aww sorry. I plan to update it soon...so hopefully it'll be easier to follow!

👍: 0 ⏩: 1

Ani-chan13 In reply to DeathTripp [2011-06-01 00:51:18 +0000 UTC]

Ah, no, it's not your fault. I'm just a noob that knows nothing of computer codes and such.

👍: 0 ⏩: 1

DeathTripp In reply to Ani-chan13 [2011-06-01 20:55:33 +0000 UTC]

hey I managed to get the other persons BG code to work! If you give me the link to the deviation that you wish to use as the BG then I can help you out with the code if you like? <3

👍: 0 ⏩: 1

Ani-chan13 In reply to DeathTripp [2011-06-01 22:33:17 +0000 UTC]

Sure sure. But I'm not done making the BG yet. How does the "other persons BG" work? I don't want to give any passwords... And what exactly is it?

👍: 0 ⏩: 1

DeathTripp In reply to Ani-chan13 [2011-06-01 22:44:45 +0000 UTC]

haha I don't need any passwords lol...I mean when your done with your BG and have uploaded it to deviantart....send me a link to it and I'll figure out a code for you XD I wouldn't ask for a password >< <3

👍: 0 ⏩: 1

Ani-chan13 In reply to DeathTripp [2011-06-01 23:37:23 +0000 UTC]

OH! Thank you so much! I have no clue how to make it so this really helps out a lot. I'll probably be done the BG by the end of the week. I'm a bit busy now, with homework and school, but I'll try to get it done ASAP so you don't have to wait. Thank you so much. XD

👍: 0 ⏩: 0

2D-or-not-2D In reply to ??? [2011-05-17 19:13:25 +0000 UTC]

wht did you use to make the background picture? like wht program?

👍: 0 ⏩: 1

DeathTripp In reply to 2D-or-not-2D [2011-05-31 14:31:53 +0000 UTC]

photoshop!

👍: 0 ⏩: 1

2D-or-not-2D In reply to DeathTripp [2011-05-31 23:38:00 +0000 UTC]

ok thnx :3

👍: 0 ⏩: 0

Shadoritos In reply to ??? [2011-05-17 01:46:08 +0000 UTC]

It won't work for me OTL I've refreshed the page like 90 times, checked the code and tried reuploaidng the piece and I still can't see it

👍: 0 ⏩: 1

DeathTripp In reply to Shadoritos [2011-05-31 14:32:43 +0000 UTC]

I'm sorry. Someone else also had this problem and I tried helping but couldn't figure out why it wasn't working.

👍: 0 ⏩: 0

capn-gary In reply to ??? [2011-05-15 17:04:28 +0000 UTC]

Thanks. Now to sit down and try it...

Gary

👍: 0 ⏩: 0

cherryclover In reply to ??? [2011-05-10 21:04:08 +0000 UTC]

Same here, Thanks SO much!!!!! <3

👍: 0 ⏩: 0

Solarune In reply to ??? [2011-05-10 13:33:59 +0000 UTC]

Ah, thank you so much! I have been wanting to know what the right div class is for ages. XD Now I can do backgrounds, yay! Great tutorial.

👍: 0 ⏩: 1

DeathTripp In reply to Solarune [2011-05-15 18:14:12 +0000 UTC]

^^ thanks! I intend on updating it at some point! Glad I could help though!

👍: 0 ⏩: 1

Solarune In reply to DeathTripp [2011-06-06 22:46:58 +0000 UTC]

No problem!

👍: 0 ⏩: 0

Nordeva In reply to ??? [2011-05-08 14:08:26 +0000 UTC]

It works on my page, but my friend *lemonsaregreat123 can't do it...
We tried to copy exactly what I wrote in my custom box and paste is on hers, but it still doesn't work
Why is it?

👍: 0 ⏩: 1

DeathTripp In reply to Nordeva [2011-05-09 09:49:02 +0000 UTC]

without more information such as a link to the background image I wouldn't know what is wrong.

👍: 0 ⏩: 1

Nordeva In reply to DeathTripp [2011-05-09 13:21:16 +0000 UTC]

Oh sorry
It's this one --> [link]

👍: 0 ⏩: 1

DeathTripp In reply to Nordeva [2011-05-31 14:30:59 +0000 UTC]

aww I'm sorry...I tried using the URL and my code but for some reason it wont work...you might need to upload it again and try again. Sorry I couldn't help and sorry for the late reply! ><

👍: 0 ⏩: 1

Nordeva In reply to DeathTripp [2011-06-01 14:02:56 +0000 UTC]

Don't worry
Let's see, this is the code:

[link] " />


Blah blah



She copies this code and it doesn't work...

👍: 0 ⏩: 1

DeathTripp In reply to Nordeva [2011-06-01 15:20:24 +0000 UTC]

I got it to work!! okay this is the code you need!

<


[link] " />
>

I hope that helps!! let me know if it doesn't!

👍: 0 ⏩: 1

Nordeva In reply to DeathTripp [2011-06-01 18:42:47 +0000 UTC]

Ok thank you, I'll try!

👍: 0 ⏩: 0

ShadowRulz3000 In reply to ??? [2011-05-01 23:48:59 +0000 UTC]

it won't show on mine! D:

👍: 0 ⏩: 0

RagingSalamence In reply to ??? [2011-05-01 02:53:03 +0000 UTC]

If the deviation go to storage, it still would work?

👍: 0 ⏩: 1

DeathTripp In reply to RagingSalamence [2011-05-09 09:46:09 +0000 UTC]

I don't know, I have never tried it. sorry

👍: 0 ⏩: 1

RagingSalamence In reply to DeathTripp [2011-05-09 12:15:44 +0000 UTC]

Nevermind, it works. Thanks anyway :'D

👍: 0 ⏩: 0

julesiax In reply to ??? [2011-05-01 00:26:16 +0000 UTC]

It didn't work for me. Nothing showed up ;o;
i need to try again.

👍: 0 ⏩: 1

julesiax In reply to julesiax [2011-05-01 00:29:46 +0000 UTC]

nevermind. I got it. Thank you for the tutorial!

👍: 0 ⏩: 0

Lynxiie In reply to ??? [2011-04-28 15:27:05 +0000 UTC]

How do you do it so the DA ID pic still shows up?

👍: 0 ⏩: 1

DeathTripp In reply to Lynxiie [2011-05-09 09:46:53 +0000 UTC]

so far I don't think there is a code that allows this to work. I have never tried it to be honest.

👍: 0 ⏩: 1

Lynxiie In reply to DeathTripp [2011-05-09 09:59:49 +0000 UTC]

lolz kk, jw thankiez

👍: 0 ⏩: 0

Forty-Fathoms In reply to ??? [2011-04-22 17:26:21 +0000 UTC]

I've seen people put backgrounds behind deviations, gallery widgets as well. Will this code work for that as well or just custom widget boxes?

👍: 0 ⏩: 1

DeathTripp In reply to Forty-Fathoms [2011-05-09 09:48:21 +0000 UTC]

unfortunately this just works for custom widget boxes...you can however add pictures over the top if they are DA thumbnails or sorced from an image hosting site such as photobucket....this is what I use as I don't know the code to make it appear behind deviations. Sorry.

👍: 0 ⏩: 1

Forty-Fathoms In reply to DeathTripp [2011-05-09 22:08:14 +0000 UTC]

That would make more sense, and I understand what you mean by the thumbnails and image sourcing. Thanks for replying though, it was very nice of you.

👍: 0 ⏩: 1

DeathTripp In reply to Forty-Fathoms [2011-05-10 09:29:25 +0000 UTC]

aww your welcome...sorry I couldn't help fully. Some people have managed to put backgrounds behind ID's apparently....but so far I haven't been able to...and I haven't seen any either.

👍: 0 ⏩: 1

Forty-Fathoms In reply to DeathTripp [2011-05-10 10:09:27 +0000 UTC]

I've put on behind my ID. I figured it out.

👍: 0 ⏩: 1

DeathTripp In reply to Forty-Fathoms [2011-05-10 11:26:48 +0000 UTC]

ahh I see! good job <3

👍: 0 ⏩: 1

Forty-Fathoms In reply to DeathTripp [2011-05-10 12:44:56 +0000 UTC]

Haha thank you. If you are wanting to have it as well and you don't have the code, I can give it to you.

👍: 0 ⏩: 1

DeathTripp In reply to Forty-Fathoms [2011-05-10 15:53:28 +0000 UTC]

wow thank you! thats very sweet of you ^^ I can add it to the bottom of the tutorial and give you credit if you like?

👍: 0 ⏩: 1

Forty-Fathoms In reply to DeathTripp [2011-05-10 20:04:59 +0000 UTC]

It's no problem and sure, if you'd like to add that to the bottom of the tutorial that's fine with me:

I'm going to give you a link to a picture that displays the code. When I put it here, parts of the code disappear because of how deviantART works:

[link]

👍: 0 ⏩: 0

Tanis711 In reply to ??? [2011-04-22 03:34:38 +0000 UTC]

THIS IS FLIPPIN AWWEEEEEEEEEEESSSSOOOOOMMMMMMMEEEEE!!!!!!

👍: 0 ⏩: 1


<= Prev | | Next =>