Full width double colum

[Haz]

Hello,

could you kindly tell me how to achieve a similar effect

I want my first column picture to be full width and fill the whole column

While text being in the second column container but the same size

Hope you can help me

[christopher]

Hi Haz,

You need to add the image to your first column as a background image in the column background settings. You will need to set the background to cover.

Please kindly read the first section (includes information on how to set background) of the article below:

Creating Layouts | Themeco Docs

You also need to make sure that you will set the Page Attribute of the page to Blank - No Container | Header, Footer.

For more information:

Page Settings | Themeco Docs

Thank you.

[Haz]

Thank you so much for your assistance,
Worked out perfectly now!

[rad]

You’re most welcome!

[Haz]

I have faced a little issue, text looking great

Picture looks squashed, how do i maintain 100% of its size?

[ruenel]

Hello Haz,

To assist you with this issue, we’ll first need you to provide us with your URL so that we can check your element structuring on the page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

[Haz]

Sure, i have attached it in the secret note

[ruenel]

Hello Haz,

You have set the background image size as cover which means that the image cover the whole column as much as possible. If you want to display the full image, please use contain instead.

And by the way, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

We would love to know if this has worked for you. Thank you.

[Haz]

Looks amazing, thank you so much for your help, very happy!

[ruenel]

You’re welcome Haz!
It’s good to know that it has worked for you.