Streaming live at 10am (PST)

Background image overlapping section below

I tried making a website similar to webflows “Building a business website” tutorial however there is an error where the end of the background image overlapping the section below.

Link is below.


Here is my public share link: https://preview.webflow.com/preview/pixels-superb-project?utm_medium=preview_link&utm_source=designer&utm_content=pixels-superb-project&preview=18f7621a586ea9768636e976632a983f&mode=preview
([how to access public share link][2])

Place the image within a div, set the div to the 100vh and set Overflow to hidden.
This should do the trick :slight_smile:

Hi, thanks for the reply. However the image is within a DIV Block. Setting it to 100vh and hidden overflow didnt work. The background image is a transistion and set to rotate. Don’t know why it seems to jump over and isn’t contained.

Switch the order of divs, the div block 2 should be first.
Set this settings to the div block 2:

Set this settings to the background image:

Switch in the interaction to target the background image and not the div block 2.

I hope this helps…

Amazing! It doesn’t overlap anymore. Now, the image runs out of the edges during the interaction :frowning:

https://preview.webflow.com/preview/pixels-superb-project?utm_medium=preview_link&utm_source=designer&utm_content=pixels-superb-project&preview=7763f3a0b3ba7ccd539def6734030395&mode=preview

It would be amazing if you could help me out!

Set the background image to higher than 100%.
I did 160% and it looked awesome

1 Like

You mean the width of the background image?

Yes. Set width to 160% (same for max width)
Remove the height settings and Fit.
Change Position to Relative and Top -30%

1 Like

No luck, mate. Attached a screenshot (error on left side). I’ve only got a basic understanding on website designing. So, thanks for coping!

https://preview.webflow.com/preview/pixels-superb-project?utm_medium=preview_link&utm_source=designer&utm_content=pixels-superb-project&preview=1d51ee03fa9ca5d3add02b8c849f97ae&mode=preview

You’re almost there. :slight_smile:
Remove the Fit settings from the background image (Alt+Click on the word Fit)
Screen Shot 2020-03-30 at 12.40.16 PM

In Position, change the top from -30px to -30% and remove the Left 0 setting.
Screen Shot 2020-03-30 at 12.39.59 PM

1 Like

Hope you meant to set fit settings to none. Alt click just brings it back to fill. It came up good in the webflow preview, however when published it was the same as before.

https://pixels-superb-project.webflow.io/ (published link)

https://preview.webflow.com/preview/pixels-superb-project?utm_medium=preview_link&utm_source=designer&utm_content=pixels-superb-project&preview=8ee58f44889ec0cd2692c33d574dcc7e&mode=preview

edit:

Just played around and changed the position to “absolute”, the top at -20%, fit to “fill” and the width to 120%. It did the trick!

https://pixels-superb-project.webflow.io/

Thank you so much for the help. Couldn’t have done it without your help. Your work looks amazing btw! I can return the favour by putting up a good review anywhere. Just let me know where! Will come to you if i get stuck somewhere again. Hope you don’t mind :wink:

Thanks again!

1 Like

I’m really happy I was able to help! It looks fantastic.
And of course you can always reach out for help, I will try the best :slight_smile:

1 Like