Stretch images

[ariellevate]

Hi!
I wrote this post earlier. https://theme.co/apex/forum/t/remove-spacing-stretch-images/37030/2?u=annekling
And I did not respond to it in time I guess, because I could not respond to the same post. The solution provided in the post removed the spacing but the images are not stretching like they should. All the four pictures creates one image together so I want the edges to line up and the image to stretch both vertically and horizontally to fill the colums so that the edges line up and the image becomes whole so to speak. I don´t care if it gets distorted.

Can you help me with this? Is there a better solution than to part the image into four part and still have the four different parts be clickable to different pages? wind mills/ solar power and two additional ones?

[friech]

Hi There,

Thank you for writing in, you can not keep the alignment of the images if you added it as a background of the columns. Please add your image as Image element and remove the height: 100vh; and width: 100vh; you applied on the columns.

Add this to each of your Image’s Element CSS area.

$el.x-image,
$el.x-image img {
	width: 100%;
}

Also, your images needs to have the same size (width and height). The Wind Mills and Solar Power is not the same height you need to correct that.

You might also want to embed the headlines to its respective images. Or else we need to position absolute the headline to place it on top of the images.

Hope it helps,
Cheers!