Page 1 of 1

Adding Background Image in Grid

Posted: Mon Mar 21, 2022 10:03 pm
by 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.

Re: Adding Background Image in Grid

Posted: Mon Mar 21, 2022 11:26 pm
by 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.

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 12:25 am
by 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.

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 12:38 am
by mlsto
So this means you cannot add a background image in a grid section with this software, as it does not work.

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 12:54 am
by crispy68
did you read my post? I said it can be done and showed you how. :?

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 8:03 pm
by mlsto
crispy68 wrote: Tue Mar 22, 2022 12:54 am 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/

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 9:10 pm
by 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.

Re: Adding Background Image in Grid

Posted: Tue Mar 22, 2022 9:52 pm
by mlsto
Thank you for the update, keep forgetting the spaces in image files.

Thanks again