Shop Mobile More Submit  Join Login
Content-Holder Box Floating Image Tutorial by CypherVisor Content-Holder Box Floating Image Tutorial by CypherVisor

Exclusively for Premium members and Super groups only


How to use ?


Just copy the source code(s) below and paste it in your Custombox module in your profile or group page.


SOURCE CODE:



<img src="DIRECT-IMAGE-URL" align="right"/>




Note: Change your image alignment from right to left by replacing the align="right" with align="left" in the above code.


Fella image link (the image that I've used for demo in this tutorial)
------------------------------------------------------------------------------------------------------------------
http://fc01.deviantart.net/fs70/f/2013/069/d/6/fella_by_cyphervisor-d5xk416.png


Background image that I've used for demo in this tutorial:
-----------------------------------------
Background link: [link]
by =TaNa-Jo


The blue content holder box






Other Content-holder boxes: [link]





Other tutorials


Custom Box background tutorial:


Custom background for DeviantID-box widget:


Custom background for New deviation-box widget:




Want to customize your profile more?


Check all my free resources + tutorials: [link]



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 :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.
Add a Comment:
 
:iconthe-pegasus-katja:
the-pegasus-katja Featured By Owner 5 days ago  Hobbyist Digital Artist
thanks! it worked.
Reply
:iconlivid-aria:
Livid-Aria Featured By Owner 6 days ago   General Artist
How do you overlap? I can get it to go underneath but not over... ; 3 ; <3
Reply
:iconmiss-creativity96:
Miss-Creativity96 Featured By Owner Jan 24, 2016  Hobbyist Digital Artist
Umm.. excuse me?
I want to put seperate pictures next to each other how can I do that?
They always come below each other
Can anyone help? asap if possible?
Reply
:iconwolfklng:
wolfklng Featured By Owner Jan 23, 2016  Hobbyist Digital Artist
anyway to use gifs here? or is it just png 
please respond anyone asap.
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 24, 2016  Hobbyist General Artist
Use this code and enter the gif "image" url as if you were entering one for an image, and it should come up as a moving gif.
Reply
:iconmaeeson:
maeeson Featured By Owner Jan 14, 2016  Hobbyist Digital Artist
why are my pictures so big?/
Reply
:iconqasmask:
qasmask Featured By Owner 5 days ago  Hobbyist Digital Artist
Try using this to change the height <img src="img link here" height="pixelnumber" align="right">
Reply
:iconmaeeson:
maeeson Featured By Owner 4 days ago  Hobbyist Digital Artist
no it was a glitch
i had those codes on and it apparently was super big?
but its fixed now


something apparently happened?
Reply
:iconqasmask:
qasmask Featured By Owner 4 days ago  Hobbyist Digital Artist
Thats weird, i'm glad it was just a glitch 
Reply
:iconmaeeson:
maeeson Featured By Owner 4 days ago  Hobbyist Digital Artist
Same
Reply
:iconlivid-aria:
Livid-Aria Featured By Owner Jan 9, 2016   General Artist
Lol... how do you make something go on top of the box? ;;
Reply
:iconbakagummi:
Bakagummi Featured By Owner Jan 5, 2016  Student Digital Artist
I can ttry right now ! 
Reply
:iconmagicantgirlkitsune:
MagicantGirlKitsune Featured By Owner Jan 5, 2016  Hobbyist Artist
it sounds kinda complicated D:
Reply
:iconbluesplashy:
Bluesplashy Featured By Owner Jan 1, 2016  Hobbyist General Artist
Nope. Failed.
Reply
:iconqasmask:
qasmask Featured By Owner 5 days ago  Hobbyist Digital Artist
Try <img src="img link here" height="100" align="right">
Reply
:iconuphryx:
Uphryx Featured By Owner Dec 30, 2015  Hobbyist Digital Artist
how do you make them without the backround on the images.??? Halp.
Reply
:iconkwithecat:
KwiTheCat Featured By Owner Jan 29, 2016  Hobbyist Digital Artist
Edit your image, go to the picture's layers, right click and select add alpha channel, and then save it as a PNG, make sure the PNG settings are correct. 
Reply
:iconuphryx:
Uphryx Featured By Owner Jan 29, 2016  Hobbyist Digital Artist
Thanks!! This helped!
Reply
:iconkwithecat:
KwiTheCat Featured By Owner Jan 29, 2016  Hobbyist Digital Artist
No problem n.n
Reply
:iconxcakeplays:
xCakeplays Featured By Owner Dec 28, 2015  Hobbyist Digital Artist
How can I put it on the right side, right next to my custom box?
Reply
:iconaerisorion:
AerisOrion Featured By Owner Dec 27, 2015  Hobbyist General Artist
can we resize the image? 
Reply
:icongetgay:
GetGay Featured By Owner Dec 27, 2015  Student Digital Artist
Add height="pixelnumber" within the brackets !
Of course change the pixelnumber to an actual number

Also works with width

example : 
<img src="img link here" height="pixelnumber" align="right">
Reply
:iconmeowsician:
meowsician Featured By Owner Jan 18, 2016  Hobbyist General Artist
it doesnt seem to work for me?
Reply
:icongetgay:
GetGay Featured By Owner Jan 18, 2016  Student Digital Artist
could you copy paste the code here and let me see?
Reply
:iconmeowsician:
meowsician Featured By Owner Jan 18, 2016  Hobbyist General Artist
 <img src="orig04.deviantart.net/5296/f/2…" height="180" align="right">

i've tried lots of different heights and such but it doesnt change at all.
Reply
:icongetgay:
GetGay Featured By Owner Jan 18, 2016  Student Digital Artist
Ah yeah, seems that height doesn't work, but if you  use width instead it does
Reply
:iconmeowsician:
meowsician Featured By Owner Jan 18, 2016  Hobbyist General Artist
aaa okay! thank you!
Reply
:icongetgay:
GetGay Featured By Owner Jan 18, 2016  Student Digital Artist
np !
Reply
:iconaerisorion:
AerisOrion Featured By Owner Dec 27, 2015  Hobbyist General Artist
thanks xD i already found where i was making the error :P i added px at the end so the dimensions werent changing :P thanks a lot for replying :squee:
Reply
:iconchockit:
Chockit Featured By Owner Dec 25, 2015
When I do it it either jumps in or out of the content holder box :/
Anyone know how to fix this?
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 24, 2016  Hobbyist General Artist
What does the code you entered look like?
Reply
:iconchockit:
Chockit Featured By Owner Jan 24, 2016
aah, my friend fixed it for me
Reply
:iconbakagummi:
Bakagummi Featured By Owner Dec 23, 2015  Student Digital Artist
cool ^^
Reply
:iconk-dera:
K-dera Featured By Owner Dec 17, 2015  Student General Artist
I have a small cuestion; can you increase the size of an image?
Because I have this little problem and I don't know if I can fix it or not :c 

P.s: btw thanks for all this tips!
Reply
:iconfoxiibles:
Foxiibles Featured By Owner Edited Dec 22, 2015
You need to use the code <img src="DIRECT-IMAGE-URL" align="right"/> it's in the description

You need to replace "DIRECT IMAGE URL" with the images URL, so for your image orig09.deviantart.net/7c89/f/2…   it'll be like that, so then you have the picture increased, well for me it worked. So for me I right click the image (on Chrome) and it says copy image ADRESS, go and click that.
Reply
:iconk-dera:
K-dera Featured By Owner Dec 22, 2015  Student General Artist
Thanks for the tip! But I already did all that at the beginning, and the size stayed that way. But it's okay, I liked it like this. :)
Reply
:iconfoxiibles:
Foxiibles Featured By Owner Dec 22, 2015
Your welcome! 
Reply
:iconkeiala:
keiala Featured By Owner Dec 14, 2015
//this sort of works without core btw?
Reply
:iconthe-phantom-ghost:
its dosent work it just goes inside the custom box Untitled89 by the-phantom-ghost
Reply
:iconsunnybunny1199:
sunnybunny1199 Featured By Owner Jan 24, 2016  Hobbyist General Artist
Did you put the code after the thumbcodes for the stamps?
Reply
:iconjuvialle:
Juvialle Featured By Owner Dec 11, 2015
If you haven't fixed this yet, put a space between your end quote for your image url and the align tag and see if that does the trick :U
Reply
:iconthe-phantom-ghost:
the-phantom-ghost Featured By Owner Dec 13, 2015
still didn't work :'(
Reply
:iconjuvialle:
Juvialle Featured By Owner Dec 13, 2015
Huh. Could you please copy+paste all of the custom box code and send it to me in a note? I can mess around with it and if I can catch it I'll tell you what the error was.

I'm training myself in coding websites and things, which is the only reason I ask. > v>
Reply
:iconthe-phantom-ghost:
the-phantom-ghost Featured By Owner Dec 13, 2015
I actually managed to get it work with another picture, I don't no why it wasn't working with that other one XD 
Reply
:iconzackazi:
Zackazi Featured By Owner Jan 20, 2016  Student General Artist
can you tell me how you were able to get it to work? i am unable to ;/
Reply
:iconthe-phantom-ghost:
the-phantom-ghost Featured By Owner Jan 20, 2016
Idk it wouldn't work with that picture .-. I just tried messing around with other pictures and after like an hour of blood and tears it worked 
Reply
:iconzackazi:
Zackazi Featured By Owner Jan 20, 2016  Student General Artist
ahh okay c": thanks!
Reply
:iconjuvialle:
Juvialle Featured By Owner Dec 18, 2015
Oh, good! That's weird, but I'm glad you got it to work xD
Reply
:iconbadazal:
badazal Featured By Owner Dec 2, 2015  Hobbyist General Artist
How do you make it float on the top portion? I cant find a spot where it doesn't jump into the content box...
Reply
Add a Comment:
 
×




Details

Submitted on
March 10, 2013
Image Size
923 KB
Resolution
800×2800
Link
Thumb
Embed

Stats

Views
93,517 (6 today)
Favourites
5,856 (who?)
Comments
934
×