Shop Mobile More Submit  Join Login
Deviation-box background tutorial by CypherVisor Deviation-box background tutorial by CypherVisor

»»»»»»»»»»»»»»»»»»»»»»»»»»» 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 Featured Deviation widget in your profile or group page.



Source Code:


<div class="popup2-moremenu"><br><div class="floaty-boat"><img align="center" src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>




Code to stretch image (It works also as to repeat image ONLY FOR SOLID COLOR IMAGES though!) :

---------------------------------------------------------------------------------------------------------------------------------------------
Insert the width and height in the <img> tag of the code as shown below:

<img width="YOUR-WIDTH-SIZE" height="YOUR-HEIGHT-SIZE" src="URL"/>


EXAMPLE:
<div class="popup2-moremenu"><br><div class="floaty-boat"><img align="center" width="1000" height="1600” src="BACKGROUND-URL"/><br></div></div><br><div class="popup2-moremenu"><br><div class="floaty-boat"><br><div align="center"><br><br><a href="DEVIATION-URL"><img src="DEVIATION-IMAGE-URL"/></a><br><br><br>DESCRIPTION TEXT HERE</div></div>




My background image link (the background that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc04.deviantart.net/fs70/f/2014/053/8/a/deviationboxdemo_by_cyphervisor-d77jeon.jpg



Other tutorials

For custom-box widget:
Custom-box Background Tutorial by CypherVisor

For deviantID-box widget:
deviantID widget box customization tutorial by CypherVisor




Want to customize your profile page?


Check all my free resources + tutorials: [LINK]



Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks



I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some points :points: to me as an appreciation or support.

I take commissions to make custom journal CSS too. Check out my Journal CSS folder or send me a note

Add a Comment:
 
:iconryxiall:
Ryxiall Featured By Owner Aug 11, 2015  Professional Digital Artist
Tried several times and it did not work for me :( All I got was a the background image showing, but nothing else.. Is the code outdated?
Reply
:iconpolarbearsincapes:
polarbearsincapes Featured By Owner Edited Aug 10, 2015  Hobbyist General Artist
I have a quick question. Is there anyway to fix an image from not fitting into the box? The deviations that I'm attempting to use are too huge that they just don't fit into the box.
Nevermind. I figured it out
Reply
:iconliliebiehlina3siste:
liliebiehlina3siste Featured By Owner Jul 27, 2015  Student General Artist
Will you do something like this for the commission widget as well? :la: if that is possible...
Reply
:iconcarijet96:
carijet96 Featured By Owner Jun 28, 2015  Hobbyist General Artist
what am i gonna do when de deviation is to big?
not the background. when im doing it like the toutorial the whole thing is filled with my deviation and its cut on the edges. 
id be glad for some help.
Reply
:iconmonstercatdrawer:
MonstercatDrawer Featured By Owner Jul 29, 2015  Hobbyist General Artist
It did that for me as well DX
Reply
:iconlinxthepowerful:
LINXthepowerful Featured By Owner Jun 7, 2015  Hobbyist General Artist
It just shows links to the  pictures:  Screen by LINXthepowerful

Is this how its supposed to look like?: Screen by LINXthepowerful
Reply
:iconzarinari:
Zarinari Featured By Owner Jul 21, 2015  Hobbyist Writer
No, the reason why only links are showing up is because you're only putting in links.  You need to put the code in first and then insert the links into the code.

Copy and paste the code in the description, then put the links where the bolded words are.
Reply
:iconlinxthepowerful:
LINXthepowerful Featured By Owner Jul 21, 2015  Hobbyist General Artist
Oh, I figured it out.  
Reply
:iconprincess-marina-chan:
I fully figured out how to make it so it doesn't show up small or too big but just wondering on some advice on how to make it so the image doesn't look blurry on my main page?
Reply
:iconcaptricosakara:
CaptRicoSakara Featured By Owner May 12, 2015  Hobbyist Digital Artist
How do you change the Text color below the feature image?
Reply
:iconlaghrian:
Laghrian Featured By Owner Edited May 7, 2015  Student Digital Artist
What if my daily devianton is menu? I mean menu with buttons, cant put img url cause I dont have it. How to do it?
Reply
:iconmarylandlovely:
MarylandLovely Featured By Owner Apr 30, 2015  Hobbyist General Artist
You make really great tutorials. Thanks so much!
Reply
:iconterra-bites:
Terra-Bites Featured By Owner Apr 28, 2015  Hobbyist General Artist
I was hoping there'd be a way to easily install a background onto the predesigned widgets.
That's alright. I'll just have to shove everything onto a massive custom box.
Reply
:iconpeejebus:
PeeJebus Featured By Owner Apr 22, 2015  Hobbyist General Artist
its not workign for me
Reply
:iconlivingbut-not-really:
livingbut-not-really Featured By Owner Apr 14, 2015  Hobbyist Writer
I still don't understand a thing about how this works...
Reply
:iconxxomgsouniquexx:
XxOMGsoUniquexX Featured By Owner Apr 8, 2015  Student General Artist
My thumbnail shows a broken link o.0
Reply
:iconsevencorridors:
SevenCorridors Featured By Owner Mar 7, 2015  Hobbyist General Artist
My thumbnail got oversized :o (Eek) Any solution to this problem ?
Reply
:iconmanyminigamer:
ManyMiniGamer Featured By Owner Mar 29, 2015  Hobbyist General Artist
it's maybe the size of your picture. They take the full size of your picture and put it that way.
Reply
:iconwreck-itralph:
Wreck-ItRalph Featured By Owner Feb 23, 2015  Professional Traditional Artist
It doesn't fully work anymore and caused by dA admins.

Admin Response by Wreck-ItRalph
Reply
:iconorangeponi:
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
I think the issues with the image overflowing the box can be fixed by adding style="max-width: 100%" after class="floaty-boat" (inside the div element)
Reply
:iconidoodlechibis:
IdoodleChibis Featured By Owner Mar 28, 2015  Hobbyist General Artist
I tried what you said & it still shows it to big, Did you make it its own like <div style="max-width: 100%" or like this <div class="floaty-boat" style="max-width: 100%"
I tried both and i still cant get it to work ; A ;
Reply
:iconluna-nightfire:
Luna-Nightfire Featured By Owner Feb 17, 2015  Hobbyist General Artist
the box for this is too small to fit the image and description could you possibly tell me how to fix this problem in extending the main box?
Reply
:iconorangeponi:
OrangePoni Featured By Owner Feb 23, 2015  Hobbyist Digital Artist
Check out the comment I just left above; leaving a reply on here so that you get a notification and are able to see it.
Reply
:iconno-pe:
No-pe Featured By Owner Feb 16, 2015  Hobbyist Artist
i have a problem , it didn't work . 
Reply
:icontasha9090:
Tasha9090 Featured By Owner Edited Feb 15, 2015  Hobbyist General Artist
I had a problem with my picture size issue being to big but then after trying to figure out a solution i saw to put width="500" in between img and src, it helped
Reply
:iconfaeloth:
faeloth Featured By Owner May 31, 2015
Thanks so much!
Reply
:icontasha9090:
Tasha9090 Featured By Owner Jun 10, 2015  Hobbyist General Artist
your welcome
Reply
:iconnatanthe6th:
NatanThe6th Featured By Owner Apr 25, 2015  Hobbyist General Artist
yep, works for me as well! thx!
Reply
:icontasha9090:
Tasha9090 Featured By Owner May 7, 2015  Hobbyist General Artist
Awesome!
Reply
:iconlucynickbakura:
LucyNickBakura Featured By Owner Mar 25, 2015
thank you so much :hug: it works!
Reply
:icontasha9090:
Tasha9090 Featured By Owner Mar 25, 2015  Hobbyist General Artist
Your welcome ^_^
Reply
:iconbexxasaurus:
bexxasaurus Featured By Owner Feb 12, 2015  Hobbyist General Artist
I'm using the code that's not supposed to stretch the image, but my featured art is being stretched to fit on the entire widget.. any ideas why? :(
Reply
:icondroidigan:
Droidigan Featured By Owner Feb 11, 2015  Student General Artist
But is there a way for your "newest deviations" box to have the deviations atop the background, so you don't have to edit your box everytime you upload something?
Reply
:iconrippleart:
RippleArt Featured By Owner Edited Feb 16, 2015
No :(
Reply
:iconsnow-fangs:
Snow-Fangs Featured By Owner Feb 1, 2015  Student Digital Artist
Doesn't work for me
Reply
:iconswag-qu33n:
swag-QU33N Featured By Owner Jan 29, 2015  Student Digital Artist
How do we change file size?
Reply
:iconsonikkudrawings:
Sonikkudrawings Featured By Owner Jan 24, 2015  Hobbyist Digital Artist
Something to add:
<div class="commentcount"><a href="DEVIATION URL#comments"><span class="iconcommentsstats"></span>X Comments</a></div>
You have to mannually update the number, though.
Reply
:iconliger-inuzuka:
Liger-Inuzuka Featured By Owner Jan 19, 2015  Professional Traditional Artist
Good day
We are seeking reworking our profile visual design and have come across your many tutorials, may we say they are fantastic and resourceful. Albeit we have a single inquiry; after searching through some of your tutorials one thing we can not locate is a tutorial of how you created custom headers for your widgets on your front page. Is there an established tutorial we failed to find, if not could you explain please how you created those custom headers?

Thank you
Reply
:iconpenguinlove2506:
penguinlove2506 Featured By Owner Jan 17, 2015  Hobbyist General Artist
Well everything is fine with the picture and all. But the featured deviation no longer shows up, it just shows the icon for a broken link. I think I broke something.
Reply
:iconkitopia:
kitopia Featured By Owner Jan 17, 2015  Hobbyist Filmographer
Copy and paste
if your image is too over sized. Where your image url is, after the " put

width="ANY WIDTH" height="ANY HEIGHT"> to choose it to your wants
Reply
:iconyoshi-kitten:
Yoshi-Kitten Featured By Owner Feb 7, 2015
omg thank you this helped so much!
Reply
:iconrazska:
Razska Featured By Owner Jan 21, 2015  Hobbyist General Artist
This tip was perfect -- thank you so much!! This was the exact problem I was having :hug:
Reply
:iconabysmai:
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
May I just inform you that you're absolutely amazing oh my goodness! Seriously, I couldn't figure out how to get the resizing to happen to save my life. 
Reply
:iconkitopia:
kitopia Featured By Owner Jan 18, 2015  Hobbyist Filmographer
ahhh thank you !!! : D just saw some people below confused and i thought id help! <3
Reply
:iconabysmai:
Abysmai Featured By Owner Jan 18, 2015  Hobbyist General Artist
Well I'm glad you did!! Yeah you've definitely saved HTML lives after this. :thumbsup:
Reply
:iconmaroonmaverick:
MaroonMaverick Featured By Owner Jan 7, 2015  Student General Artist
for my first try, it work!!! yay! but thing is that when I put a description on it, it doesn't appear, maybe because of the size of my deviation? help! 
Reply
:iconizayas-neko-nyan:
Izayas-Neko-nyan Featured By Owner Jan 6, 2015  Hobbyist Digital Artist
Thank you so much for this tutorial! :D

Could you make one for the "Newest Deviation" box background (The slideshow one)? Please :3
Reply
:iconashravan:
Ashravan Featured By Owner Edited Jan 4, 2015  Hobbyist Traditional Artist
It deforms the pic..O.o What did I wrong? :icondragonidleplz:  ashravan.deviantart.com/


Well; could it be because I've the picture AND a customized text, so 800x800 is too less? 

(That's why the pic is only a link, because there is no space anymore? O.o)

Would be really glad you know the answer :aww:
Reply
:iconkhaoticcuteness:
KhaoticCuteness Featured By Owner Dec 29, 2014  Student Artist
I'm so sorry bout this but could you please tell me what I did wrong and how to fix it? I would really appreciate it thank you khaoticcuteness.deviantart.com…
Reply
Add a Comment:
 
×




Details

Submitted on
June 27, 2010
Image Size
1.1 MB
Resolution
900×4016
Link
Thumb
Embed

Stats

Views
254,893 (84 today)
Favourites
2,852 (who?)
Comments
1,471

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License.
×