Row BG Image, display full width and Height.

[barefootMarc]

I’m trying to get the ROW to stay the same size as the BG Image as the browser window shrinks. Right now the BG Image is being cropped as the width decreases.

Ideally as the width decreases I would like the height of the div to decrease as well. Maintaining Responsiveness.

-M

[David Martin – Support]

Hi,

Can you add your WP credential so I can take a look at the page builder setup?

I can see you are using this image as the background, are you look to preserve the non-blurred border around the edge? http://test.overdrivedesign.com/structure/wp-content/uploads/2015/07/ImagesTreatment_2.0_ag.jpg

Thanks.

[barefootMarc]

This reply has been marked as private.

[David Martin – Support]

Hi Marc,

If you add both your images here (not the combined treated image), I’ll see if I can help you build a page to your requirements.

– David.

[barefootMarc]

Thank you.

So the sharp image is the first layer, and the blurry sits on top. Or We can just use an image of them flattened together.

-=M

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

I have built you a new SPB Section that you can call into your homepage template.

The new SPB asset uses a layered Row/Column page setup with background images on each, combined with come custom CSS. This creates the effect you describe above.

Here is the demo SPB asset: http://test.overdrivedesign.com/structure/?spb-section=homepage

Do you know how to add that to your homepage if not, let me know and I’ll help you.

– David.

[barefootMarc]

That is so cool. How did you do that (i’m checking the custom css now)? What is the SPB section of the theme?

-M

[barefootMarc]

Beautiful.

Can you make spacers responsive? Or just use the visibility option to change which spacer is used depending on width.

-M

[David Martin – Support]

Hi Marc,

Glad to help you out. It will look nice on your site!

I would utilise the visibility option for the spacers, to give you way more control.

– Let me know if you need any help.

Thanks.