Lost and confused. Background image not playing nice

Design help General
1

Hello All,

Yay, my first Webflow topic. The minds that live here must be filled with all sorts of magic, I hope I am able to tap into some of it.

I have pasted my read-only link as requested to allow y’all to see what I’m up to. I own a small dirt bike accessories business and I’ve taken to building the website myself to save myself some money. It has been going well, mostly but for some reason I seem to have a consistency issue with my background. It’s really getting me frustrated and after many hours of Webflow tutorial watching and forum reading I have not yet figured it out, I’m hoping y’all can help.

I understood from the tuts that the desktop breakpoint is what gives every other breakpoint it’s settings from a style point of view, as in it cascades up and down. I also understood that each bigger breakpoint affects itself and bigger, not smaller. I have wrapped my head around this construct and have built and altered things in my site according to that.

For clarity, I am using a Macbook Pro 15" with 1680 x 1050 res. I have a 2nd screen which is 1920 x 1080. I mostly design in the Macbook screen and check published results on both the Macbook Pro, the 2nd screen and my Samsung S10+.

I find it easier to explain problems in point form because that ensures all issues get a response so I’m going to do that here.

  1. I understand breakpoints. I understand their use. However when I open my project in the designer to work on it on the Macbook Pro screen, the default PX size shown is 1279px @ 100%. Also, it actually doesn’t matter what screen I am viewing the designer on. Why 1279px?

  2. Because I wanted to see what the site would look like on smaller and bigger screens, I added all available breakpoints. It seems like more work because now I have to align everything accordingly so that every size is catered for. This is really difficult with my landing page background which has a slider with 3 images. Only the first image gives me trouble, the remaining two do not.

    Image_A
    Image_A3360×1828 1.32 MB

    See Image A above, this is the published site on my Macbook.
    Image_B
    Image_B1917×943 503 KB

    See Image B above, this is the same published site on the 2nd screen See how the boots are cut off on Image B? Why? And for the life of me I cannot get the orientation to fit across all layouts so that I have consistent background image.

Now, if you look at the site in the designer, it looks as follows:

Desktop
Desktop1736×1798 785 KB
1280px
1280px1736×1792 795 KB

Above left is desktop breakpoint (seems to default to 1279 as stated above), above right is 1280px breakpoint

1440px
1440px1956×1800 870 KB
1920px
1920px2656×1832 1.07 MB

Above left is 1440px breakpoint, above right is 1920px breakpoint.

Tablet
Tablet1042×1790 548 KB
Mobile_landscape
Mobile_landscape940×1794 357 KB
Mobile portrait
Mobile portrait1006×1796 322 KB

Above left is tablet breakpoint, above middle is mobile landscape breakpoint, above right is mobile portrait breakpoint. I couldn’t get the background image to completely show in either landscape or portrait so I settled for good enough which is what you see. Also, I wanted fixed, but fixed background doesn’t seem to work for me in landscape or portrait, as soon as I publish it and view the site using my Samsung S10+, the image is not fixed. It is however fixed when in designer and in preview.

Now comes the publishing headache. There is an annoying discrepency between what I see in the designer and preview, compared to what I see when published. Let’s take image B above, it’s the largest breakpoint @ 1920px. Remember the cut off boots? It doesn’t look like that in the preview. Here they are side by side, the published site on the 1920px screen to the left and the preview of the 1920px breakpoint on the right.

Side_by_side_A
Side_by_side_A1547×499 767 KB

Why is there a difference between 1920px preview and 1920px published?

  1. Next thing is mobile. You can see above that landscape and portrait are supposed to look a certain way, but that’s purely in preview mode. When I publish it, it looks anything but like that. Check here, it looks completely wrong on my Samsung S10+ See below:

scrnshot_mobile
scrnshot_mobile1080×2045 699 KB

In closing, it’s clear I’ve made some fundemental errors here, I really have tried to watch several Webflow tutorials and have read posts on the forum and while I have gleaned a lot from that nothing has quite homed in on my exact issue other than possibly the fact that my understanding of responsive design needs work. I suspect that if I had a broader understanding of responsive design I’d have this figured out in a shorter time frame but since I need help now I consider this my “training”, so any support or advice will be greatly appreciated. Thanks all.

Rgds,
Moody

Here is my site Read-Only: LINK

2

This is based on your screen size, resolution, and how much available space the designer has to occupy after taking into account the toolbars to the left and right. My default resolution in the Designer is 1452px wide on my 1920x1080 monitor for example.

This is because your background image is set to cover the available space of your slider element which is set to display at 100% height. Basically it will grow as large as possible to prevent white space around the edges, so this means that on larger screens the image is getting much wider without getting any taller - cropping some of the top and bottom.

Outside of giving your image more breathing space between the main focal point (the rider) and the top/bottom edge, you’ll probably have to be okay with some cropping on the extreme display resolutions. If you wanted to prioritize the top or bottom of any given image you can change it within the background position toolbar:

image

Unfortunately this is due to how mobile devices display fixed background images, so you’ll need to modify how this area is built if you want it to stay locked in place on mobile devices. The short tutorial is making a container element with a set width/height and overflow hidden, then dropping an image block (or div with a background image) within that section and setting the element position to fixed. This will give you the same effect as setting the background image to fixed but it should display normally on mobile devices.

I’m not seeing as big of a difference as you are with this (the Designer preview and live site look nearly identical for me with boots being cutoff on both) however this is the nature of percentage-based sizing and background images set to contain. Depending on the available height and width of any given window, your slider image will do what it needs to fit within that space. If you’re browser has a bunch of used space within the top toolbar then it will give you less vertical height within that window and some of the image will be cut off to accommodate.

This looks to be an issue with your main navigation container element which has a static width applied to it (568px) which is causing it to break out of the slider element bounds. Change this to 100% on mobile landscape and it should fix the issue.

image

I’d get in the habit of using your browsers developer tools to double check for these types of issues as the Webflow Designer can prevent these types of issues from displaying properly. Here’s what the site looked like when I previewed it in Chrome’s developer tools:

image

Hopefully that helps you out and don’t hesitate to reach out if you have any more questions or issues. The site looks great for someone just getting into web design so keep it up!

3 Likes
3

That’s some effort :webflow_heart:
Thank’s from me too!

1 Like
4

Hi Mikey,

Thank you so much for the reply, I appreciate the info share. Everything you explained makes sense. It’s a pity about the background image cropping. I guess for it to work I’d need to have the object in the picture at more of a distance so as to give more cropping space.

The trick regarding the fixed image on mobile, I’ll dig into that via the tutorials to figure out how to best achieve that. I’m weary about messing with it because I may wreck the whole thing in the process ha ha…it’s happened before and for some reason undo didn’t save the day, I was quite pissed, my project was wrecked :rofl: :joy:

The container element that was breaking out of the slider element bounds was the trick, I sorted that out and the mobile site width is now sorted. The only challenge I am left with now is that while the width on mobile has come right, the way the site looks on mobile is wrong. See how the Motocartel logo is over the helmet? That’s wrong, it shouldn’t look like that and in none of the previews does it look like that, only when published. So I can’t find which breakpoint to focus on to fix the problem because in preview, it looks fine. So I’m a bit lost as to how to fix this issue.

Here’s a quick published scrnshot of the mobile site now after reducing the site width. The helmet needs to be under the logo not behind it. Tried to figure that out today, gave up eventually.

scrnshot
scrnshot1080×2045 993 KB

5

Here’s a quick video with some fixes you can apply for the mobile breakpoints:

2 Likes
6

That’s awesome of you!

Also, soothing voice you got there sir

1 Like
7

@Moody

And like I mentioned in my last video, here’s how you would setup the fixed background section that should work as expected across all of your breakpoints.

Feel free to follow along on your own project if you’d like (my read-only link cab be found below for reference) or you can clone the project here and just copy/paste the element instead.

https://preview.webflow.com/preview/fixed-section-for-mobile?utm_medium=preview_link&utm_source=designer&utm_content=fixed-section-for-mobile&preview=3d6463863cb9f7f7fc535e4b7fa150f9&mode=preview

3 Likes
8

@mikeyevin Dude, you’re a magician, thank you so much. You make the Internet a better place. I can’t thank you enough, everything you mentioned worked perfectly. After making all the changes, the only thing I had to mess about with that wasn’t working was on the largest break point but I got it to work in the end because of something I noticed you doing. Instead of moving the image itself, I should move the container that it is in instead, simple right? But had I not seen you do it I’d have not figured it out. Now I can never forget :smirk: :handshake: Another artifact of this exercise is what do you know the background image is now fully visible no boots cut off, it looks awesome.

And of all things I’ve had such a bad day, only to come home to this and my website sorted in minutes after a few guided clicks, you sir are a gentleman :vulcan_salute:

1 Like
9

Thanks Mike, I’m going to try this. I’ve definitely learnt a lot this week. Your effort is really appreciated man :slight_smile:

10

Thanks dude, I’m glad I could help out!

Don’t hesitate to reach out if you have any other questions and good luck with the business :metal:

2 Likes
11

Hi Guys. So I am having the same issue with fixed background images on the mobile breakpoint. I’ve tried both using sections and DIV blocks but no luck. I know its possible because Ive recently seen this feature while scrolling on my mobile. Any suggestions? The fixed feature shows up fine in display mode, but when I visit it using my phone, no luck :confused:

https://preview.webflow.com/preview/k-co-website?utm_medium=preview_link&utm_source=designer&utm_content=k-co-website&preview=47fe4887f089fee1014805477ec42087&pageId=61241e333dbf0637d461d06b&workflow=preview

Its at the bottom of ‘Little Big Shot’ Page