Background-size: cover;

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

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

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.

  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. :wink:

Got you. Thanks for the response Gary.

No problem, take care and have fun!

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.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.