How to change background image

http://maventalent.webflow.io/

I’m struggling to change out the template images for my own in this one section. I can’t even find the image locations in the RH site navigation.

Any ideas?

(Apologies if I’m have a stupid day…)

y

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

https://preview.webflow.com/preview/maventalent?preview=7aea4588712a36e57da4401e5d909794

@amazonastyle , I’m a newbie so don’t take my word for it but I got there by going to ‘Navigation’, go down to your first ‘Client-Row-Top’ row. ‘Open’ that then select ‘Client column’. Go back to ‘Designer’ and the image is in your ‘background’.Hope thats the solution.

Should have also said, when you go to your ‘Navigation’ its in your 2nd ‘main section’

@thalco… Thanks so much for the suggestion… the things… this is what happens if change that image right in the ‘client column’ section - just that first image … it messes everything up! (See new screenshot)

Have you made sure that you clicked ‘Full cover’ when changing your images.

Ignore my last, you might have to change the classes of each image to stop this happening,but I am sure someone with a lot more experience than me will know the easy way to fix it.

@amazonastyle just noticed that the images do have their own ‘classes’ so not sure why its causing problems. I tried changing the images and it seemed fine.

It messes everything up because the first column has no “sub-class” on it. So if you change an attribute here, it will affect all other columns.

As thalco said, just upload a new image here, set the attributes to “Size: Cover”, “Position Preset TOP-LEFT” like this:

and everything is fine.

Regards
Daniel

@Daniel_Schultheiss

Hey Daniel… Thanks v much for the suggestion… I’ve tried doing this and I still get the same issue. I think what you’re saying is that I don’t need to make a sub-class, just follow your next suggestion. However, still the same issue…

You ll need to have a sub class for every other BG column image. But just for defining another background-image for each column. The rest of the definitions will be set by the first parent class (or whatever you ll call it).

Maybe you just try it out, change that in your project and if something is wrong, paste another public link here (if its not the same anymore) so that we can have a look at it.

As you can see its easy to change the images just by setting new backgrounds for the columns without adding or removing any classes.

Cheers
Daniel

1 Like

Here is a simple step by step tutorial.

It covers the first colum which has no subclass on it and the first one that has.

1.Select the first column called “client-column”

2.Click the style tab

3.Remove the existing background image

4.Upload a new one or select one from the existing assets

5.Click COVER

6.Close the panel

7.Select the next “client-column” with the subclass “mailfox”

8.Go to the style panel

9.Delete the existing image “mailfox-ipad.jpg”

10.Upload a new image or select one from the assets

11.Click “COVER”

Should work. If not feel free to post or ask.

Daniel

2 Likes

Hey Daniel,

That is the process I tried before but I think I’ve just realised the issue. For some reason, I thought the images would automatically re-size, but it seems they don’t. I take it I just need to resize before uploading. I’ll give that a shot.

Thanks v much for all your help!

@Daniel_Schultheiss … OK, images seems to be sorted but somehow, as I’ve changed them, it’s removed the overlay… ie. as you hovered, it grey-ed out (transparently) to highlight the text. Any ideas where how to amend this back to how it was?

No problem.

1.Select the element “client-block”

Goto styles, select the HOVER STATE in the upper right corner and remove the example-background image:

2.Remove the example BG Image


Done

2 Likes

You are a legend @Daniel_Schultheiss!! Thanks so much for all your help :slight_smile:

2 Likes

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