Shop Mobile More Submit  Join Login
Pretty Up Your Profile by Gasara Pretty Up Your Profile by Gasara
An updated and more in-depth version of this tutorial can now be found here.

I've been asked a number of times how I add background images to the boxes on my profile page so I thought I'd put this together. There's some basic HTML in there as well for snazzy formatting.

The code you'll need for adding backgrounds is below. Just copy/paste into your custom boxes and add your links and content.

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

ADDING BACKGROUNDS TO YOUR CUSTOM BOX:

<div class="popup2-moremenu">
<div class="floaty-boat"><img src="BACKGROUND IMAGE URL"></div>
<div class="gr-box gr-genericbox">

YOUR CONTENT

</div></div>



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

Troubleshooting & FAQ can be found here:

Custom Box - Troubleshooting & FAQCustom Boxes
Quite a few people still seem to have issues with getting their custom box backgrounds to work correctly so I thought I'd put this little troubleshooting guide and FAQ together to help. If you follow the instructions closely, you shouldn't have any problems.
If you encounter any issues that aren't explained here, please let me know. I will update this guide with any extra info or solutions as they are requested.
You can read more about customising your profile page here.
The Basics
<div class="popup2-moremenu"><div class="floaty-boat"><img src="IMAGE URL"></div></div><div class="gr-box gr-genericbox" align="center">
CUSTOM TEXT
</div>

Copy the code above and paste into a Custom box on your profile page. Add the URL of your background image where it says IMAGE URL and replace CUSTOM TEXT with the content you want


Please read before asking for help. Cheers x
Add a Comment:
 
:iconkara-matsu-b0i:
KARA-MATSU-B0I Featured By Owner May 18, 2016  New Deviant Student Artist
how do i copy the URL? ;;
Reply
:icongasara:
Gasara Featured By Owner 5 days ago
Reply
:iconakillerart-72:
AkillerArt-72 Featured By Owner May 18, 2016  Hobbyist General Artist
How do I make an image repeat/tiled? qvq
Reply
:iconakillerart-72:
AkillerArt-72 Featured By Owner 5 days ago  Hobbyist General Artist
It's alrighty, I got it x3
Reply
:iconharukucha:
HaruKuCha Featured By Owner May 14, 2016  Student Digital Artist
Oh man I really love html and css, unfortunately I don't have premium membership. I think I've fainted. 
Reply
:icongracielazycrazy2115:
GracieLazyCrazy2115 Featured By Owner May 7, 2016  Hobbyist Digital Artist
For some reason when I do this, it covers up the whole box, not showing the deviations and it covers it up. How do you fix that?
Reply
:icongasara:
Gasara Featured By Owner May 7, 2016
Possible causes:
1) You are using the code in a Featured Deviation, Gallery widget. This code will only work in a Custom widget.
2) You have deleted a part of the code or pasted the img url link in the wrong place in the code. Double check to ensure all quote marks, div tags, etc are written correctly.
Reply
:iconplutoandthecore:
PlutoAndTheCore Featured By Owner Apr 24, 2016  Student Digital Artist
How would I center my text?
Reply
:iconllanah:
llanah Featured By Owner Apr 29, 2016  Student Interface Designer
<pxalign="center"> 

Just replace "x" with space from the spacebar! Good luck.
Reply
:iconseechem:
seechem Featured By Owner Apr 6, 2016  Student Digital Artist
I cant get there to be an image that links somewhere else, it keeps going blank and I have tried 3 different codes and I still cant get it to work? Help! XD
Reply
:iconllanah:
llanah Featured By Owner Apr 29, 2016  Student Interface Designer
<axhref="websitelink"><imgxsrc="imagelink">

Just replace "x" with space from the spacebar! Good luck.
Reply
:iconmsaishakristine:
msaishakristine Featured By Owner Apr 5, 2016
I used this code.. but I really want the image to take up the whole space of the custom box.. it doesnt seem to work no matter how much I resize the image.. I uploaded :( Is there other way to make it bigger?
Reply
:icongasara:
Gasara Featured By Owner Apr 5, 2016
The background code should fill the box completely as long your image is wide enough to fill it. I recommend creating an image at least 1200px wide. It must also then be long enough to fill behind your content so I usually make mine at least 3000px long so I don't have to make a new one each time my content gets longer.
Reply
:iconblufox2:
blufox2 Featured By Owner Mar 31, 2016  Hobbyist Digital Artist
The code for the pretty background isnt working ;-;
I have written a bunch of stuff and it comes up blank on my page?
Reply
:icongasara:
Gasara Featured By Owner Apr 5, 2016
I've just checked it and it's working for me. Have you got your content written in the correct place? Compare it against the original code to see if that helps.
Reply
:iconblufox2:
blufox2 Featured By Owner Apr 6, 2016  Hobbyist Digital Artist
okii thanks!
Reply
:iconblufox2:
blufox2 Featured By Owner Mar 31, 2016  Hobbyist Digital Artist
Okay so it isnt blank anymore but the background isnt working?
Reply
:iconblufox2:
blufox2 Featured By Owner Mar 31, 2016  Hobbyist Digital Artist
nvm!
Reply
:iconblufox2:
blufox2 Featured By Owner Mar 31, 2016  Hobbyist Digital Artist
Okay im trying to add an image into the custom this but it isnt working..
Reply
:iconcharlo16:
Charlo16 Featured By Owner Mar 27, 2016  Hobbyist Filmographer
The first step broke my heart.  
Reply
:iconmochifayy:
mochiFayy Featured By Owner Apr 20, 2016  Hobbyist Digital Artist
yeah
Reply
:icongasara:
Gasara Featured By Owner Apr 5, 2016
I know, but it's just one of those things unfortunately. I'd like to think that dA will roll the feature out to everyone eventually.
Reply
:iconshibaskylee:
shibaskylee Featured By Owner Mar 22, 2016  Hobbyist Digital Artist
for some reason none of the codes will work??? :/
Reply
:icongasara:
Gasara Featured By Owner Apr 5, 2016
I've just tested them and they work fine on my profile. Double check that you've typed everything exactly the same as written here.
Reply
:iconshibaskylee:
shibaskylee Featured By Owner Apr 6, 2016  Hobbyist Digital Artist
yes, It works.
Reply
:iconshibaskylee:
shibaskylee Featured By Owner Mar 31, 2016  Hobbyist Digital Artist
nvm got it :D
Reply
:iconlemon-james:
LEMON-JAMES Featured By Owner Mar 22, 2016  Hobbyist Traditional Artist
Hey how do i make my image bigger?
Reply
:icongasara:
Gasara Featured By Owner Apr 5, 2016
Background image: I always create my images from scratch to the size I need, usually 1200px x 3000px.

Content image: add width="???px" to the image code and replace the question marks with the size you want to image to be.
Reply
:iconasliie:
Asliie Featured By Owner Mar 19, 2016  New Deviant
Why does <img src=...> don't work for me?
Reply
:icongasara:
Gasara Featured By Owner Mar 20, 2016
It's difficult to say without seeing the code as you've used it. Perhaps you are missing the quotation marks or maybe your link is for the page the image is on and not the image itself. The following links may help:

FAQ14 - How do I add images to my page?
FAQ15 - How do I find an image URL?
Reply
:iconasliie:
Asliie Featured By Owner Mar 20, 2016  New Deviant
nvm fixed it but ty anyways!
Reply
:icongasara:
Gasara Featured By Owner Mar 20, 2016
Ah, sorry I was too slow! Glad you've got it sorted x
Reply
:iconasliie:
Asliie Featured By Owner Mar 20, 2016  New Deviant
It's okay :D
Reply
:icontheredsweaterghost:
TheRedSweaterGhost Featured By Owner Mar 16, 2016  Student Digital Artist
Maybe I missed it but what about putting backgrounds on widgets like the user ID, featured deviations, and other non-custom boxes?
Reply
:icongasara:
Gasara Featured By Owner Mar 20, 2016
They require different codes to work. Check out CypherVisor's gallery for those :D
Reply
:icontheredsweaterghost:
TheRedSweaterGhost Featured By Owner Mar 20, 2016  Student Digital Artist
Thank you I'll check them out.
Reply
:iconsarenidy:
Sarenidy Featured By Owner Mar 11, 2016  Hobbyist Digital Artist
Very helpful tutorial! Thank you for providing this to the community!!!
Reply
:icongasara:
Gasara Featured By Owner Mar 20, 2016
My pleasure x
Reply
:iconjoan-grace:
Joan-Grace Featured By Owner Mar 10, 2016   Digital Artist
I tried this sevral times. I can get text in the box and change the type to what I want, but for the life of me I can't put a background in. I took a screenshot (it's a little blurry) if that will help. THIS IS THE FONT is the actual text I put in (I was testing it). What am I doing wrong?
Reply
:icongasara:
Gasara Featured By Owner Mar 10, 2016
I've just copied/pasted the code from this tutorial and it works fine for me. Are you sure your image url is correct and that it links directly to the image and not the page the image is on?
If you've got a screenshot of the code I'll take a look and see what I can see :)
Reply
:iconjoan-grace:
Joan-Grace Featured By Owner Mar 11, 2016   Digital Artist
THANK YOU!!! I kept putting the URL from the bar into the code. I copied the IMAGE URL into it. Wow. That was pretty dumb of me. THANK YOU SO MUCH!!!!!!!!!
Reply
:icongasara:
Gasara Featured By Owner Mar 14, 2016
No problem at all!
Reply
:iconmalvinaisdead:
MalvinaIsDead Featured By Owner Mar 4, 2016  Professional Digital Artist
How can I center the text in my custom box? cause <center> doesn't work. 
Do I have to use CSS instead, if yes, how do I do that?
Reply
:icongasara:
Gasara Featured By Owner Mar 5, 2016
Add align="center" to the div class="gr-box gr-genericbox" section of the background code so it reads div class="gr-box gr-genericbox" align="center"
Reply
:iconmalvinaisdead:
MalvinaIsDead Featured By Owner Mar 9, 2016  Professional Digital Artist
thank you!!
your tutorial is really helpful too! And I'm glad you still take care of it c:
Reply
:iconc0ffeh:
C0ffeh Featured By Owner Feb 27, 2016  Hobbyist Digital Artist
helped!
Reply
:icongasara:
Gasara Featured By Owner Feb 27, 2016
:hug:
Reply
:iconhaymays17:
HayMays17 Featured By Owner Feb 20, 2016
i cant because i need core :<
Reply
:icongasara:
Gasara Featured By Owner Feb 22, 2016
It's a shame that so many features are locked to non-core members. I'm working on a guide to help users without core membership customise their profiles too. There's obviously not as much that can be done but hopefully it will be a little useful to some.
Reply
Add a Comment:
 
×

:icongasara: More from Gasara





Details

Submitted on
August 25, 2011
Image Size
1.2 MB
Resolution
704×6010
Link
Thumb
Embed

Stats

Views
203,118 (38 today)
Favourites
12,412 (who?)
Comments
1,492
Downloads
1,535
×