Streaming live at 10am (PST)

Background-size: cover;


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…

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

Thanks in advance

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.