Background-size: cover;

[WillPrice (Will)]

Hello.

I’m having a bad time trying to get a really simple background image to work properly. I have an image attached to the Body tag with it set to cover, centre. No worky.

Cuts off at the bottom on mobile and tablet. If you re-size the browser on desktop, also cuts off.

Here’s my share link…
https://preview.webflow.com/preview/willholdingpage?preview=7700fbc54e57363de78de9979445c75f

Could somebody take a look and let me know what I’m doing wrong?

Thanks in advance
Will

[garymichael1313 (G.J.)]

The image is only 1080px height. The other is 1122. The content on tablet is vertically taller.

[WillPrice (Will)]

Ah, I thought it would simply stretch to fit if I added it to the Body tag regardless of the content.

Is there a way to achieve this without using a massive background image?

Sorry, HTML isn’t my bag.

[garymichael1313 (G.J.)]

1. If you need to use that image, it must be larger than the content.
2. If not, I would use a vector SVG graphic. Fade it out a little. Then export it large and optimize so it’s compressed. Add that.

There’s not a lot of options when it comes to full backgrounds. That’s why most designers use gradients or vectors.

[WillPrice (Will)]

Got you. Thanks for the response Gary.

[garymichael1313 (G.J.)]

No problem, take care and have fun!

[WillPrice (Will)]

I might be better off hand coding it instead…
CSS tricks

It’s a pretty rudimentary layout but seemingly difficult achieve in webflow.

I’ve got it working across different viewpoints (sort off) using ‘auto’ rather than ‘cover’. ‘Background-size: cover;’ doesn’t quite fit expectation.

If anyone has achieved this in webflow, let me know.