How do i set background images as override in a symbol?

Design help General
1

Hi this i my first post hope someone can help.

I have a full width image setup on this page ( its the first image )

https://hopeyard.webflow.io/work/project-1

But how do i create a full width div as a symbol so i can use on multiple pages and just change the background image, without having to keep duplicating classes.

Hope someone can help.

READ ONLY:

https://preview.webflow.com/preview/hopeyard?utm_medium=preview_link&utm_source=designer&utm_content=hopeyard&preview=34cdba4c345602a29b78d62d185002ee&pageId=5e85e714334dd40adc0ae552&mode=preview

Thanks
Kieran

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @kieran_holden :wave: Welcome to the community

You can’t replace background images using Symbol overrides just now, but you can still do this using overrides and standard images. (Which is better anyway as you can add alt-text and have responsive variants of your image).

You can set the image width to 100%, the height to 100vh, and use the new object-fit property set to cover, and Voila. Which is French for “Voila”. :smiley:

I did a video for you (3 minutes) where I placed all the content into one section (you can of course do multiple ones) and added the overrides so you could see how it was done.

I hope this is helpful and answers your question, please let me know! :slight_smile:

1 Like
3

Ah thats great thanks Mark! Will check it out

4

Like the new title too : )

5

There should have been sound as I was talking, I must have selected the wrong mic! If anythings not clear please let me know. I spelled your name wrong, apologies! :man_facepalming:

It’s a great looking site by the way, keep me posted on how it goes!

6

Thanks - its my first webflow site - interested in replacing ‘Sketch’ with it so just trying it out on a live project - this is based on a Free template im customising. Bit of a learning curve coming from sketch but seems great - just need to get faster : )

7

ok mark - ive tried workgin that in but im gettgin some unusual margins in firefox. Any chance you coudl help me out in it.

https://hopeyard.webflow.io/work/oneill

It seem like firefox doesnt like my margin now ive swapped out the background imgs. Hope that makes sense.

Thanks
K

8

If you’re designing in Firefox then we don’t support that browser. you’ll need to use Chrome or Safari :grimacing: Adding explicit widths is often required too for older broswers.

9

That’s a great solution for images. The symbol problem I cant seem to get around is background looping videos, for marquee and break out sections. Right now I have to unwrap any symbol that needs background videos to not change them all without the override. Will this feature be supported for background video at least sooner than later?

10

To create parallax effect with override image:

I combined the above with a solution from forum 142286 + some move animation and the right mix of divs. It works (#happydance):

section
–div1: 40vh
––div2: 100vh, position: -30vh
–––img: 100% 100% and cover
also: move animation on img (Check out Parallax Movement on Scroll)

read only:
https://preview.webflow.com/preview/sirlig-design-landingsside?utm_medium=preview_link&utm_source=designer&utm_content=sirlig-design-landingsside&preview=38e184f39df273dad84289a73b3b5188&mode=preview

Seems like you have to turn the eye off and on again to see it, is this normal?

Mind, the site is a work in progress - and be kind, it’s my first webflow and I know I have some testing jumble to clean up. :slight_smile: