HOME | DD

DeathTripp — Custom Box Background Tutorial

Published: 2010-01-28 18:10:12 +0000 UTC; Views: 158229; Favourites: 5079; 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

DeathTripp - Murdoc and 2D Kiss meme

DeathTripp - Feel Good Veilluse Version 2

DeathTripp - Everything You Are......Collab

DeathTripp - Murdoc and 2D Collab

DeathTripp - WIP Gorillaz Stylo Mask

DeathTripp - Squed and Stretch BirthdayCake

DeathTripp - Dance with the Devil Collab

DeathTripp - Ikki Murkrow collab

DeathTripp - Best friends four years

SynthSymphony - OPEN ~ Free Toyhou.se Codes ~

SynthSymphony - Your Religion is NOT an excuse to be a Bigot.

CloudedLullaby - Open - Kira the Houndess

spiraloso - 200 White Scifi Elements Pack

l0dicko0l - Hatsune Miku - Featured Steam Artwork

brynls - Seedy Farmer [🤖]

Dynamu1 - Steam Artwork - Esdeath | Akame Ga Kill!

lostyarts - Steam Featured Artwork | Anime Girl Cat Ears

Indae - Custom box background tutorial

CypherVisor - Custom-box Background Tutorial

GinkgoWerkstatt - .:How to add CSS to Groups [DD]

ThisMechaJunkie - Username Changing

TaNa-Jo - Custom Box Tutorial

TimberClipse - Custom User Box Tutorial

TheMangaPit - Journal Skin Links Help

MissCelia - HOW TO: make journal skins 1

endlesssly - Make your skin accessible
Comments: 1030

RavensQuill In reply to ??? [2011-02-11 00:01:24 +0000 UTC]

Oh my gosh, this helped me so much! Can now pretty up my group's page! Thank you!

👍: 0 ⏩: 0

cannibal-crunch In reply to ??? [2011-02-10 23:29:56 +0000 UTC]

Is there a way to make it repeat, or do I just have to make the pixels bigger?

👍: 0 ⏩: 1

DeathTripp In reply to cannibal-crunch [2011-03-19 13:54:24 +0000 UTC]

you have to make the repeating pattern in photoshop or paint.

👍: 0 ⏩: 1

cannibal-crunch In reply to DeathTripp [2011-03-19 14:03:59 +0000 UTC]

Can't repeat it in HTML? Id doesn't work very well when I put the photo in HTML format and plug it in.

👍: 0 ⏩: 0

Sourcrystal101 In reply to ??? [2011-02-09 03:13:59 +0000 UTC]

this helped soo much!

👍: 0 ⏩: 0

meecle In reply to ??? [2011-02-06 15:17:43 +0000 UTC]

I have a question XD How do you change the text color in the boxes?

👍: 0 ⏩: 1

DeathTripp In reply to meecle [2011-02-06 21:54:18 +0000 UTC]

you can't unfortunately...none of the html colour codes work in DA custom boxes...sorry ><

👍: 0 ⏩: 1

meecle In reply to DeathTripp [2011-02-06 23:28:04 +0000 UTC]

UGH! I think DA should do something about that >.<

👍: 0 ⏩: 0

meecle In reply to ??? [2011-02-04 22:36:20 +0000 UTC]

Thanks so much for this 8D I couldn't figure it out XD

👍: 0 ⏩: 0

redvelvetplease95 In reply to ??? [2011-02-04 14:25:36 +0000 UTC]

where is the best place to create a background like this?

👍: 0 ⏩: 1

DeathTripp In reply to redvelvetplease95 [2011-02-06 21:54:26 +0000 UTC]

using photoshop ^^

👍: 0 ⏩: 1

redvelvetplease95 In reply to DeathTripp [2011-02-07 02:03:33 +0000 UTC]

which one?

👍: 0 ⏩: 1

DeathTripp In reply to redvelvetplease95 [2011-02-07 12:25:34 +0000 UTC]

lol any

👍: 0 ⏩: 1

redvelvetplease95 In reply to DeathTripp [2011-02-07 21:32:55 +0000 UTC]

lol im getting it soon

👍: 0 ⏩: 0

WeisseEdelweiss In reply to ??? [2011-01-29 23:55:19 +0000 UTC]

You're the only one that I've found who made it THIS SIMPLE.
I'm just starting out on CSS and this was very easy to follow. Thank you! Thank you!

👍: 0 ⏩: 1

DeathTripp In reply to WeisseEdelweiss [2011-02-06 21:55:02 +0000 UTC]

your welcome! I'm glad you find it helpful...I just made it in a way that made more sense to me in the hopes other people would find it useful! ^^

👍: 0 ⏩: 0

Coralulu In reply to ??? [2011-01-29 11:40:50 +0000 UTC]

Thank you!!!

👍: 0 ⏩: 1

DeathTripp In reply to Coralulu [2011-02-06 21:55:07 +0000 UTC]

your welcome!

👍: 0 ⏩: 0

Baby-Blue-Bell In reply to ??? [2011-01-28 06:53:45 +0000 UTC]

awesome tutorial, thanks so much

👍: 0 ⏩: 1

DeathTripp In reply to Baby-Blue-Bell [2011-02-06 21:55:12 +0000 UTC]

^^ your welcome!!

👍: 0 ⏩: 0

SolemnSmile In reply to ??? [2011-01-28 05:40:13 +0000 UTC]

Is is possible to make the image inserted a vertically repeating one? If so, how would I do that? (:

👍: 0 ⏩: 1

DeathTripp In reply to SolemnSmile [2011-02-06 21:56:03 +0000 UTC]

I'm not sure about this...you would have to change the code...and I don't really have much CSS knowledge at the moment...or you could make the image itself repeat vertically using photoshop

👍: 0 ⏩: 1

SolemnSmile In reply to DeathTripp [2011-02-08 20:01:06 +0000 UTC]

Okay (: Thank you!

👍: 0 ⏩: 0

falling-featherz In reply to ??? [2011-01-18 06:11:33 +0000 UTC]

Ok so I need some help. So I made my skin -->[link] ( i know it maybe too dark for text, but right now, i just wanna learn how to put it on) and I clicked download. I saw your edit2 so I right clicked, but there is no "View Image" option. Am I doing something wrong? Please help D:

👍: 0 ⏩: 1

DeathTripp In reply to falling-featherz [2011-01-18 12:26:42 +0000 UTC]

sorry I realise that it is slightly different for people using internet explorer...try doing the following:

Click download on the image and then click "View Sorce". 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 you~ I also editted the tutorial again for other people with this problem! ^^

👍: 0 ⏩: 1

falling-featherz In reply to DeathTripp [2011-01-26 05:41:05 +0000 UTC]

Okay so I got the skin in there, but now its super small. (if you go on my profile you will see what I mean)

👍: 0 ⏩: 1

DeathTripp In reply to falling-featherz [2011-01-26 11:30:23 +0000 UTC]

yeah I see...thats because I think you need to add stuff into the box before it'll "stretch" it....try spamming a load of writting in there and saving it and seeing if it gets any longer. ^^

👍: 0 ⏩: 1

falling-featherz In reply to DeathTripp [2011-01-26 13:01:24 +0000 UTC]

Ill try some more but in one of them I already have. There is a long line of g's XDD

👍: 0 ⏩: 1

DeathTripp In reply to falling-featherz [2011-01-26 13:05:35 +0000 UTC]

try putting WRITING HERE take the dots. away

br means "break" or in a keyboards case it will register as "enter". should put a blank space between the lines of writing

👍: 0 ⏩: 0

Delwyn-afon In reply to ??? [2011-01-17 18:22:47 +0000 UTC]

help! I can't figure it out! I want to upload an image to my group custom widget but it won't work!

👍: 0 ⏩: 0

CrazyMeansCreative In reply to ??? [2011-01-17 13:59:48 +0000 UTC]

Lov it

👍: 0 ⏩: 0

chi-u In reply to ??? [2011-01-15 05:17:46 +0000 UTC]

Thankyou thankyou thankyou! Worked great :3

👍: 0 ⏩: 1

DeathTripp In reply to chi-u [2011-01-16 19:21:50 +0000 UTC]

your welcome ^^

👍: 0 ⏩: 0

HerrKommandant In reply to ??? [2011-01-13 23:24:50 +0000 UTC]

I LOVE YOU ;U;

👍: 0 ⏩: 0

Finchwing In reply to ??? [2011-01-10 21:58:55 +0000 UTC]

OMYGOSH this is going to be so helpful! : D thank you so much!

👍: 0 ⏩: 0

MatworldsHeaven In reply to ??? [2011-01-08 17:47:52 +0000 UTC]

Thanks so much! Finally it works! I am gonna think of a nice design the next days! x] Thanks so much again!

👍: 0 ⏩: 0

Patynotchan In reply to ??? [2011-01-06 14:13:46 +0000 UTC]

I'm sorry disturb, but could you say what's wrong with me this code?

[link] " />


OMG

👍: 0 ⏩: 0

YouMeForTomorrow In reply to ??? [2011-01-06 10:30:24 +0000 UTC]

THANK YOU A LOT! :]

👍: 0 ⏩: 0

kibzy In reply to ??? [2011-01-05 06:16:43 +0000 UTC]

Thanks for your help =3

👍: 0 ⏩: 0

Ooh-itsTasty In reply to ??? [2010-12-30 21:51:08 +0000 UTC]

It didnt work Theres no background :/

👍: 0 ⏩: 0

TheZebraWolf In reply to ??? [2010-12-29 15:53:51 +0000 UTC]

i have a quick question, what do you mean by "click right"? I downloaded to image and clicked right, and nothing with "view image" appears. Dx

👍: 0 ⏩: 1

icepools In reply to TheZebraWolf [2011-01-07 06:17:18 +0000 UTC]

If your using google chrome click to view in another tab

👍: 0 ⏩: 0

Psykan In reply to ??? [2010-12-29 00:51:15 +0000 UTC]

I've never had a premium membership, so I think this will be very helpful. Thank you!

👍: 0 ⏩: 0

OlAVERE In reply to ??? [2010-12-28 06:09:10 +0000 UTC]

ur tutorial is what i was looking for and easy to follow thank you.. ^^

👍: 0 ⏩: 0

starchu14 In reply to ??? [2010-12-25 22:14:20 +0000 UTC]

this works for your favorite box too^^
but it covers the deviants that is in your favorites

do you think there is another code that would fix this?

👍: 0 ⏩: 0

Ryuupup In reply to ??? [2010-12-19 21:40:49 +0000 UTC]

The problem is, I clicked download but the code I need isn't there.

👍: 0 ⏩: 1

DeathTripp In reply to Ryuupup [2010-12-20 10:58:33 +0000 UTC]

what you need to do is click download on your BG image that you want to use...Then when the window loads, right click on the image and click "view image". The window should refresh and the URL that you need should now be in the bar at the top. I hope this helps!

👍: 0 ⏩: 1

Ryuupup In reply to DeathTripp [2010-12-22 02:55:46 +0000 UTC]

For some reason View Image isn't on the list. o-0

👍: 0 ⏩: 1

starchu14 In reply to Ryuupup [2010-12-25 22:11:14 +0000 UTC]

here i know how to fix this!^^

just click on the picture you are going to use,right click
select view image in different window or something simaliar to it

then the URL should be in there

👍: 0 ⏩: 1

Ryuupup In reply to starchu14 [2010-12-25 22:35:57 +0000 UTC]

I found a new way actually.I go to properties and thr URL is already there. c:
But thanks for the extra help.c:

👍: 0 ⏩: 1


<= Prev | | Next =>