UPDATE (18 March 2015): Since first posting this, the full-bleed background has changed from 725px to 724px.
I have been aware of Behance for quite some time but really never forayed into this portfolio space until recently, when I myself needed some updates and upgrades to my own portfolio (still updating).
As I was perusing all the awesomeness on Behance, I noticed some portfolio pages were full-bleed, edge-to-edge, no white borders. Just design. Loved it. I jumped in wanting to replicate this same look. But what I realized, is that you had to slightly trick the portfolio page a little to achieve this look.
I googled Google and really didn’t find anything that was helpful. Just a bunch of templates on Creative Market which assumed you already knew what to do with said templates.
This is what I figured out and thought I would share for those wanting to know.
There are 2-ways of doing this:
UNO.
1. Create a single designed image that is 725 724px wide and however long you want the page to be.
2. Upload your single image as a BACKGROUND image. Background images cannot exceed 1MB. Leave the position of the image as is and no need to “check” the Repeat/Tile box.
Once uploaded your new background image will only show the first 550px of your single designed image.
3. Next, upload a transparent PNG file of the same dimensions or a little taller than your designed background image. The transparent image will force the entire background image to show.
4. Done.
DOS.
Same as Steps 1 & 2.
3. Add a text field on top of the background image and hard return all the way down the page until your background image is revealed.
4. Done.
Here are some basic templates in Illustrator and Sketch 3.
Hope this helps.
31 Comments
Thank you for posting this. I was tearing apart the code on other people’s pages trying to figure out the different techniques. I also saw some one who created the long background image with 500px in the center of a solid color. Then posted a full length higher resolution 600px image in the center. It all lined up and they were able to have the center content with much higher quality than the 1 mb limit allowed.
Thank you for the tips.
Thank you, thank you, thank you. I was crazy trying to make all bg appears. Thank you!
Thank you!! I couldn’t find any useful tips, but yours are very good. I’ll will try them out. 🙂
At last 🙂 I was looking this post for ages.
Thanks, man
Thank you so much for sharing these tips. It’s exactly what I was wantin’ to know from internet in my last one hour spent!
See ya. 😀
Did everything you told me, and the right side is still not bleeding .
Any suggestions?
Thank you!
m.
Thanks a lot! I tried the first approach and it works fine on my Windows machine (Opera, Chrome, Internet Explorer and Firefox) — but on the iPad (with Retina Display) I have some problems: Whatever type of content follows after the transparent PNG, it’s not below the transparent PNG but overlapping it. You can try clicking on any of the projects in my . I tried to put some Credits (text element) at the bottom of each project.
Does anyone have a solution?
Thank you so much for that
You just take your 725px background image and upload it, then duplicate the file and crop the edges off to 600px and then upload that on top of your background image so it lines up perfectly. No need for fake png’s or text boxes!
Awesome! Thanks Allen.
You are a genius! I have been searching for this for so long! Thank you so much!
Thank you soooo Much bro … and guess what i love that UNO + DOS … ^_^ ^_^ ^_^
Thanks again and good luck
Thank you! This is so useful and helpful!
I used to do as method UNO, with a png on top of it, but still I don’t get how certain projects have a full bleed gifs (as here https://www.behance.net/gallery/21435687/Nogueira-Bachmann-Estudio ) or a full bleed series of images (not a single long one) as here https://www.behance.net/gallery/21313525/Howizi-La-Caisse-dEpargne. Single background images are useful to achieve full bleed but still you have to be careful not to exceed 1 M size… any thoughts?
Thank you so much! This is exactly what I wanted went crazy looking online for help! Thank you!
Thanks!
Something that should be noted is the 50 pixel buffer above your Main image and background. Thanks for this thread.
Nice one mate!
Like Antonella said earlier this is nice if you only want to upload a cover image that has full bleed but how can you have a series of several images in full bleed? Anyone?
Its not 725 it 727 to be exact.
@Antonella & @MACC
First URL (https://www.behance.net/gallery/21435687/Nogueira-Bachmann-Estudio)
I believe you can upload a animated .gif as a background image. They are just using one for the top of the portfolio space.
The second URL (https://www.behance.net/gallery/21313525/Howizi-La-Caisse-dEpargne), the “full bleed series of images…” If you adjust your browser below the 1024px breakpoint you can see the designer is using both a single full-bleed background image AND using the same image on top of the background. Giving you that full-bleed individual image look.
This is a nice approach. Just not a fan when you are dealing with smaller browser widths.
Hope this helps. Let me know if that works for you.
@Anshu I am getting 724px on my measurements. http://bit.ly/1CLpBkK
I’ve updated the post to reflect this change.
Hi!!! I must say, you are the only one in the web helping people with this topic!!!! So, i have so issues like @MACC, i’m looking for a way to achieve this looking
https://www.behance.net/gallery/23062811/Sberbank-info-movies
https://www.behance.net/gallery/23216201/Intertap-Game-Conception
https://www.behance.net/gallery/16395445/Megafon-Olympic-Case
My questions are, can i ovelap imagens? like in the intertap game, and
how to achieve the gif from Sberbank?
I can export videos @ good quality with 1mb but all gifs i create are HUGE, 7mbs
or more…
i’m really frustrated because i can’t find a way to achieve this…
Hi @Rafzdv.
Intertap
So you cannot overlap images. But what I believe Intertap is doing is this:
1. Set up your background design single image with the spots for the animated .gif, where you want your gif to go.
2. Upload your background.
3. Then upload your gifs as you would normally, as the portfolio images. The key here is to use the transparent png as spacers, in between the animated gifs. Intertap is using 1px X how ever high it needs to be. The width of the transparent png can be whatever you want, it just needs to take up the vertical space.
NOTE: If you have graphics that are on top of the animate gif, those graphics need to be apart of the animated gif file.
Here is the basic idea: http://bit.ly/1xe1F8V
You would upload a total of 7 portfolio images, 4 placeholder transparent pngs and 3 animated gifs. You will probably need to play around with the height of the transparent pngs to get your animated gifs to line up exactly with your designed background image.
Sberbank
The gif in Sberbank was probably created in Adobe After Effects. After Effects is a great tool for created really nice animated gifs and they compress really small too.
Megafon
Probably used After Effects to create the animated gif.
Hope that helps.
Have they disabled the large background image now? Tried to upload and it says it can only be 100 px high.
@Chirs
Behance has updated there site to fully support full-width images. No more hacks. You can read my new post about it.
http://www.ferencpetho.com/blog/behance-supports-full-bleed/
Hey @Ferenc, So basically from now on it’s not possible to upload bg for the project.
The reason I still try it out, is that I have the gifs, that I would like to be on the full width bg, and the 600 px max width ofr gifs does not allow me to make the gif be full width 🙁
And idea how to play it around?
Hello, nice article, what i’m seeing lately on behance are animated gifs as a project preview ( cover) . I am wondering how is this possible since, officially, Behance allows only jpeg as a preview image?
Good question !!
Can someone please share how to add gift to behance project cover. And don’t say it’s impossible, as there are many projects that DO have them
Very helpful for the first user , Thank you .