Fixed background image scroll issue

Hey
I’m sure this is pretty simple but its got me stuck. I want to have the main background image fixed, so that when the user scrolls down to the 3rd section, the section is transparent and the text scrolls over the image. I hope this makes sense.

can any one help please?

heres the read only link: https://preview.webflow.com/preview/personal-fitness-kent?preview=ae94492a4e1e5739839b451433453663

Hey

Thank you for your help. But no that’s not quite what I meant.

I want to keep that second section as it is, but its the third section (enquire now section) that I want to have invisible so that the text then flows back over the main background image from the top. Does that make sense?

Thank you again

Bradley

The site structure you’re using is not structurally semantic, which could or could not be part of the issue, so I’ll have to take a closer look when I get time.

Sorry for the confusion about the 2nd and 3rd section it may have been a late night when I read it.

Take care,
~B.

Ok thank you very much. To be honest I didn’t realise there was something wrong with my structure. I thought I was doing it the way that Webflow teaches. So thank you for any help :slight_smile:

It’s more about my structure of containers, sections, nav and divs and my perception of what that is semantic base on old standards, than yours or what Webflow teaches. Semantic code used to be a huge deal with XHTML, now it seems kind of willy-nilly to me. I’ll most likely take it apart and put it back together the way I would build it, just to see if anything changes… but I’m not saying the work you’ve done here is “wrong”, just different from the way I build and my experience. That’s all. :slight_smile:

Looks like you have it working now with the different bg image and a nice transparency on the 2nd section.

Thanks for the help Brian. But yes I tried something a bit dfferent and it seems to work quite nicely so I’ll leave it like that

However I am having an issue: the background image wont appear when I go onto my mobile, however it does appear on the designer and on desktop view. Do you know why this may be?
http://personal-fitness-kent.webflow.io/

Brad,

It works for me on all mobile test platforms/emulators in Chrome, FF and my android phone… did you fix it already? :smile:

~B.

Wow thank you for checking all of those!
No its still not working for me. The internet connection where I am isnt the best but its also not the worst.

I saw a thread somewhere that you should minimise the file size of all images as that can significantly slow it down. Do you think maybe thats what the problem is?

Brad,

That’s always a possibility. Mobile downloads all the graphics on the site, used or not, and if the files are Titanic in size, that will break the deal in a heartbeat. I did notice a few days ago that the original image you had as a background (the woman stretching) was HUGE in file size. If you want to send me the images you’re using on the site I will run them through photoshop and reduce the size for you without compromising the quality. Just link me to them in in Dropbox or other cloud share and I’ll pull them down and knock them out later tonight.

Let me know what you want to do.

~B.

Thats very nice of you to offer, thank you!
Funnily enough photoshop is currently downloading on my laptop as we speak!
Once its done ill give it a go myself as practice but if i have any problems ill let you know, is that ok?

Thanks again

Brad,

That’s fine, but if you don’t want to take the time …I’ve been using Photoshop since the early 90s and can optimize pictures for web production quickly. If you have the time, they take it and learn along the way. I’m on deck if needed.

Good Luck,
~B.

Wow, yeah… these files are huge… one is 3.6 megabytes! Since you aren’t doing a photography website, there is no real reason for the need to support retina displays with your graphics. :wink:

Yeah im pretty amateur with some of this stuff! Gotta learn somehow though right :wink:

Ok ill send them across to you (plus a couple others im planning on using if you dont mind?)

Ive never actually used dropbox before but i have an account. Do i need your email to send them across?

Yes, use ::masked::. Make a folder for them and share it to me via
email addy. Let me know if you run into a snag. Depending on your Dropbox
account, we may need to do it in batches due to the size of the originals.
Sound good?

Sounds great.
Im just uploading photos to dropbox now and its saying it has 8 minutes left to upload haha!

Ill let you know if anything goes wrong

OK. I’ll be around so just send me the link when it finishes.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.