Streaming live at 10am (PST)

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

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)

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

Ah thats great thanks Mark! Will check it out

Like the new title too : )

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!

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 : )

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

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.