Image to fill split screen container

Thanks Rad. I’m away this week but will check over the weekend and let you know.

Let us know how it goes.

Cheers!

Hi there - removing the above CSS makes no difference.

Any other thoughts? I need to go live with this site in the next couple of days and this is the only outstanding issue. Getting a bit desperate now!!

Hi there,

You didn’t remove it, I still can see it there. Please you should add background-position: center center; along with your other background styling. To make sure it’s centered when clipped.

Thanks!

Hi Rad

I did remove it and there was no change. I just put the code back in as I was afraid of breaking the site!

I have now removed and added the extra code to the image styling. Still not working and the image now tiles when I change the device settings.

Hi there,

It’s not gonna break your site, it’s the same CSS provided on this thread. Plus, it breaks the proper styling for section’s columns (table cell) and you change it to flex, it makes it inconsistent which is why your columns don’t have as expected. Now the column is vertically centered due to that, see the yellow space above and below it? And sometimes it causes negative space.

And please don’t remove any code from background image styling, you need to add what I provided. Something like this

background-image: url("http://example.com/dev/wp-content/uploads/2017/08/thinker.jpg"); background-size: cover; background-position: center

Thanks.

I think you’ve only gone and cracked it Rad.

Thank you SO much Rad for your patience and efforts with this issue.

The images now scale themselves on the 3 top device settings. I have just turned off the images on mobile phones and small tablets which is fine.

Site now ready to go live - THANK YOU AGAIN. YOU ARE A LEGEND.

Regards,

Ali

On behalf of my colleague, you’re welcome. Cheers!