I’ve been using Unbounce for a while now and I cannot get the images to appear centered and nice. The “Preview” always cuts off the top of the image or the parallax does half of the image. It is frustrating and I’m not sure how to correct it. Do I need to upload images to an exact dimension so Unbounce can place them centered? I am familiar with stretching it to fit background and the alignment feature but the “Preview” never looks the way the builder shows it. Help Unbounce, this is frustrating.
The image sections are always cut off and don't appear right in the "Preview"
Userlevel 7
+4
Hey Seth,
Do you have a page you can share so we can see in context what you’re having issues with? Are you talking about images that are placed as background images in sections or something else?
Chat soon,
Yes, when i place an image in a section as a background. Does it help to
create them at a specific dimension?
Userlevel 7
+4
Ah, ok. Yeah, unfortunately, you just have to play around with the positioning. I’m not aware of a fool-proof way for getting it to align exactly where you want it. This is due to the fact that the background stretches depending on the browser window size.
As a best practice, I usually build my pages at a width of 940px and for background images in sections, I usually resize the image (using a photo editing tool like Photoshop, Canva, PicMonkey, etc.) to be twice the width of the page. So for a 940px width page, my backgrounds would be 1880px.
This is just my personal preference based on what seems to work best, but it’s totally arbitrary as to which widths you choose. And I rely on the preview window rather than the builder window to help me get the alignment correct.
I find that it is impossible to get the images to look perfectly situated on every screen/browser size, so I try to build based on the most common size for the project at hand.
I’d be curious to hear how some of the other designers are working with their background images and positioning. Hopefully we can get a discussion going, as this is an interesting topic.
The problem with a 1880px image is the image size, and the speed it takes to load the image. Even a compressed image will take a second or so to load it up.
This is a problem that I am personally very fed up with.
Yes, this is very interesting and VERY frustrating! Trying to figure it out, hence how I came across this thread. I emailed someone at Unbounce, hopefully they have an answer, but maybe it’s something that can be controlled with CSS?
I would LOVE a solution to this in Unbounce. So frustrating. CSS possibly?
Reply
Log in to the Unbounce Community
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.