Adding Background Image in Grid

[mlsto]

Hello

I am trying to have a background image cover in one part of the layout grid but just not getting it to show on the live site.

Shows in the software just not on the live site.

See screenshot

Live site: https://www.carlosstomer.com/

https://imgur.com/3XwGkUa

Can anyone help with this.

[crispy68]

Are you sure you want it to cover the entire background of the grid column? It can be done but it will distort your image if set to 'cover' as your image looks pretty square. If so, you will need to do the following:

1. Open up the grid properties and set the Grid System to either Flexbox or CSS grid (not default)
2. Add your background image to the column set to cover
3. You cannot add top/bottom padding to grid to create spacing for the text. You will need to add padding/margin to the text to create this.

2nd option is to set the background size to Contain. This will keep the image from distorting and will scale.

The 3rd option is to simply add the image as an object into the grid cell and set the full width to true.

[mlsto]

Thanks for replying, the option I am looking for is an image on the left that you see and text on the left.

Pages have the image on the browser left as a cover and the text on the right.

Not sure why this cannot be done with this software.

[mlsto]

So this means you cannot add a background image in a grid section with this software, as it does not work.

[crispy68]

did you read my post? I said it can be done and showed you how.

[mlsto]

did you read my post? I said it can be done and showed you how.

Sorry didn't mean for it to come out so.

I tried all your suggestions and the image just doesn't show on the live site, why is that, it only shows in the software preview.

The only way the image shows is when you drop the image in the grid but that doesn't stick the image to the edge of the browser.

As you can see the image is not showing.

https://www.carlosstomer.com/

[Pablo]

The filename of the image is invalid (not web safe).

Related FAQ:
https://www.wysiwygwebbuilder.com/forum ... .php?t=131

Also, note that if a grid column does not have any content then the height will be zero.

[mlsto]

Thank you for the update, keep forgetting the spaces in image files.

Thanks again