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:
 
:iconlucy-heaven:
Lucy-Heaven Featured By Owner 3 days ago  Student Digital Artist
Is there a way to get the image to float on the top part of the content holder box?
I have tried doing it on my profile, like the right part of it, I'd like the gif to be right on the box, like laying on it with the paws and tail going in the box.
But I can only get it either inside or outside the box, not in between.
Is there a way? :/
Reply
:iconking-min:
King-Min Featured By Owner 6 days ago  Student Digital Artist
-HOW TO FIX IMAGE BEHIND BACKGROUND-

The problem is that you are not pasting the image url inside the content box but instead outside of it.

WARNING: If you copy and past these codes they will not work as they have spaces in them. 

Go here for background Code - Custom Box Background Code Generator v1.9.2 (last
Here for Content Box code- White Content-Holder Boxes
Description above for floating image code


Simplified Rules
------------------------------------

1. Find floating image you want to use. I recommend it to be around 200 pixels in width.

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


2. Restart your custom box so that it is completely blank, then paste the following codes in this order...


Background Code *Example* 

< div class="popup2-moremenu">< div class="floaty-boat">< img src="Background Url Here" />< /div>< div class="gr-box">< font size="2">


Then the content box code... *Example* 

< div align="center" class="ch-ctrl indifade">< br>< b>CONTENT HEADING HERE< /b>< br>< br>< div align="left" class="ppp"> BODY TEXT HERE.< /div>< br>< /div>


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

3. Now to add in the floating image you need to past the floating image code... 
img src="FLOATING IMAGE URL" align= "right"/ >  ... just after BODY TEXT HERE. in the content box code... so it should look like this *Example* 


< div align="center" class="ch-ctrl indifade" >< br> <b>CONTENT HEADING HERE< /b><br>< br>< div align="left" class="ppp"> BODY TEXT HERE.img src="FLOATING IMAGE URL" align="right" />< /div>< br>< /div>


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


4. Get the custom Url of your floating image and past it in the "FLOATING IMAGE URL"


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


5. In the end you code in your custom box should look something like this... *Example*


< div class="popup2-moremenu">< div class="floaty-boat">< img src="Background Url Here" />< /div>< div class="gr-box">< font size="2">

 < div align="center" class="ch-ctrl indifade">< br>< b>CONTENT HEADING HERE< /b><br><br>< div align="left" class="ppp"> BODY TEXT HEREimg src="DIRECT-IMAGE-URL" align="right"/>< /div>< br>< /div>





Hope this helps!

Reply
:iconhetabee:
Hetabee Featured By Owner 1 day ago  Hobbyist Writer
It really did, thank you! :D
Reply
:iconsaiiorr:
saiIorr Featured By Owner Aug 21, 2015  Hobbyist Digital Artist
my image is staying in the content holder box and isn't overlapping the background. is there some way to fix that, or must I use a button as a content holder??
Reply
:iconhiikariee:
Hiikariee Featured By Owner Aug 15, 2015  Student Digital Artist
Why aren't anybody answering about how their image float in back of the background? :(

I really need to edit my page fast but sigh-
Reply
:iconyoshi-kitten:
Yoshi-Kitten Featured By Owner Aug 5, 2015
it works but when i have a background in the box it goes behind the background 
Reply
:iconsakur1ta:
sakur1ta Featured By Owner Aug 5, 2015  Hobbyist Digital Artist
no hay en español TTvTT?
Reply
:icondasterendermanalbino:
DasterEndermanalbino Featured By Owner Aug 8, 2015  Professional Digital Artist
solo tienes que 
<img src="DIRECT-IMAGE-URL" align="right"/> 
colocar imagen en  DIRECT-IMAGE-URL  (osea ve a la imagen y copia la url   

Reply
:iconraspberrymonstr:
RaspberryMonstr Featured By Owner Aug 3, 2015  Student Digital Artist
my picture keeps going behind the box!!!! :(
Reply
:iconhollytheblackcat:
HollyTheBlackCat Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
Ummm, is there a video tutorial somewere? English is not my native language and I kinda got lost in step 5 ^^;
Reply
:iconhollytheblackcat:
HollyTheBlackCat Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
Nevermind, figured it out ^^
Reply
:iconpoke-chann:
Poke-chann Featured By Owner Jul 26, 2015  Student
it it possible to get an image to float on the TOP of the custom page?
Reply
:iconrazata:
Razata Featured By Owner Jul 22, 2015  Hobbyist Digital Artist
i've been trying for a while to make an image stick out of the box like yours, but when I attempt to do so, it just goes above the content instead. this has probably already been answered a million times but i've looked for a solution and could not find one ;-; sorry
Reply
:icontakiashii:
Takiashii Featured By Owner Jul 14, 2015
can you possibly make an image float in front of another image? 
Reply
:iconkeithdrawsthecrew:
KeithDrawsTheCrew Featured By Owner Jun 28, 2015  Hobbyist Artist
How can I copy the long html..? .3.
Reply
:iconruekuma:
ruekuma Featured By Owner Jun 27, 2015
i tried but the image is still inside the box
Reply
:iconmouriere:
mouriere Featured By Owner Jul 15, 2015  New Deviant Hobbyist Digital Artist
this is probably because the image is too small to fit over the expanse of the box. try using a bigger image.
Reply
:icontissuecat:
TissueCat Featured By Owner Jun 21, 2015  Hobbyist Digital Artist
What's a good small canvas size for this type of image? Thanks!
Reply
:iconraykoopa:
RayKoopa Featured By Owner Jun 21, 2015
Can I float images outside the negate-box thingie? I realized it with padding right now, but that steals space (s. my profile) =3
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 17, 2015  New Deviant Hobbyist Digital Artist
for any one having a hard time please comment under this comment. i will try helping all i can.
Reply
:iconhevonenstudios:
HevonenStudios Featured By Owner Aug 3, 2015  Hobbyist Digital Artist
Mine is just staying inside the box, I'm trying to get a 300px wide thing to hover over the box so I know its not because its too small. Sorry to bother D:
Reply
:iconhollytheblackcat:
HollyTheBlackCat Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
Ummm, is there a video tutorial somewere? English is not my native language and I kinda got lost in step 5 Sweating a little...
Reply
:iconhollytheblackcat:
HollyTheBlackCat Featured By Owner Jul 30, 2015  Hobbyist Digital Artist
Nevermind, figured it out ^^
Reply
:iconmeg-pony:
Meg-Pony Featured By Owner Jul 19, 2015  Hobbyist Artist
I used the code, but it only appeared right under the content-holder, and not half way on. What can I do to change that? 
Reply
:iconvinabe:
Vinabe Featured By Owner Jul 10, 2015  Student General Artist
Hey! So I was trying to insert an image into my box and a while back, like months ago, I had no problem following this tutorial and it worked like a charm! However, I was re-coding my page, and now it won't work.
I'm not sure what I'm doing wrong, but basically what happens is regardless of where I place the image source stuff, it ends up making my box longer and not floating above the box. It just stays inside.
Reply
:iconspacefvck:
spacefvck Featured By Owner Edited Jul 5, 2015  Hobbyist Digital Artist
okay, say i wanna put the image NEXT to a box inside of hovering over it?
like if you look at my page you'll see a second box with links/music in it
i want to get the transparent box moved to the left, and a gif next to it 0: is that possible??

aa nevermind i figured it out!!
Reply
:iconclgarette:
ClGARETTE Featured By Owner Jul 2, 2015
is there any way to move the image around instead of just inserting it to the right, left, or center? ;3;
Reply
:iconqaypanda:
qaypanda Featured By Owner Jul 2, 2015  New Deviant Hobbyist Digital Artist
no sadly there is not. : -( you could try doing what is did on my page by putting a little extra space in the img to give it a little more spacing but there is a pretty high chance it wont work. : -( 
Reply
:iconclgarette:
ClGARETTE Featured By Owner Jul 2, 2015
yea ive tried that already
thanks for the help.
Reply
:iconnoasdraws:
NoasDraws Featured By Owner Jul 1, 2015  Student General Artist
My gif doesn´t aperar on my profile, it apears this strange icon thingy. Any ideas?
Reply
:iconqaypanda:
qaypanda Featured By Owner Jul 1, 2015  New Deviant Hobbyist Digital Artist
that means the url that you are using for the link is not working with the code! try uploading to to sta.sh on some other img hosting site!! or the file could be too big for the code :0
Reply
:iconolaffles:
Olaffles Featured By Owner Jul 8, 2015  Hobbyist Digital Artist
I have roughly the same problem, and I've tried everything that I can think of. 
I've tried Sta.sh, Resizing, different hosting sites, Etc. It's doing it to all of the GIFs/Images that I want to use.
Reply
:iconnoasdraws:
NoasDraws Featured By Owner Jul 2, 2015  Student General Artist
I tried using another image but it was not on stash, at it didn't work either, I will try uploading it on stash
Reply
:iconqaypanda:
qaypanda Featured By Owner Jul 8, 2015  New Deviant Hobbyist Digital Artist
i could be the gif is to long so the code wont read it because its to big :O
Reply
:iconnoasdraws:
NoasDraws Featured By Owner Jul 9, 2015  Student General Artist
Don't worry XD it worked
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
how can I fix this?
D by XinYiLx
how can I make it not cut off the progress bars?
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 28, 2015  New Deviant Hobbyist Digital Artist
try moving the floaty down below the bar! if not you may have to move the icon down with the bar. :0
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
D by XinYiLx
it still cuts it off ;n;
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 28, 2015  New Deviant Hobbyist Digital Artist
how about you try shrinking the img with:
< img src="PIC URL HERE" align="left" width="#" height="#"/ >
(remove the spaces) you have to change the "#"'s to a smaller height and width than the normal img size
Reply
:iconxebiux:
Xebiux Featured By Owner Jun 28, 2015  Student Digital Artist
ok i'll try that
Reply
:iconmelaniethemarkiplite:
MelanieTheMarkiplite Featured By Owner Jun 27, 2015  Hobbyist General Artist
Well, as you can see--- I did the thing, with the thing-- the code, and the picture wasn't where fella was, so I looked at the comments down below where you were helping others and used those codes and I--

 /southern accent/ i diddly darn fricked up partner ;w; 
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 27, 2015  New Deviant Hobbyist Digital Artist
oh what happened??
Reply
:iconmelaniethemarkiplite:
MelanieTheMarkiplite Featured By Owner Jun 27, 2015  Hobbyist General Artist
Nevermind I think I got it now XDD 
 It was all messed up before and I was like
//panics 
11659968 1461652650815648 1408492676 O by MelanieTheMarkiplite
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
So I have everything working (thank you) but I want my image to show much larger than what it's showing.
Reply
:iconqaypanda:
qaypanda Featured By Owner Edited Jun 23, 2015  New Deviant Hobbyist Digital Artist
use this code! 
< img src="orig08.deviantart.net/fc9f/f/2…" align="left" width="500" height="500"/ >
(remove the spaces) you can change the width="500" and the height="500" if you so please (500x500 is really big so i recommenced you change the size to fit!)
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
sta.sh/04rjn641pgy
sta.sh/01fymz13vy78

Alright, so I tried that and this is what I'm getting
Reply
:iconqaypanda:
qaypanda Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
okay try getting the size of the img then times that by two and put it in so it isn't all strechy! :0 
Reply
:iconattackfox:
AttackFox Featured By Owner Jun 23, 2015  New Deviant Hobbyist Digital Artist
So it's 900x600
so I put in 1800 and 1200 and it got even more stretchy D:
Reply
Add a Comment:
 
×




Details

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

Stats

Views
78,222 (10 today)
Favourites
5,189 (who?)
Comments
875
×