Streaming live at 10am (PST)

Background-size: cover;


#1

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


#2

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


#3

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.


#4
  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:


#5

Got you. Thanks for the response Gary.


#6

No problem, take care and have fun!


#7

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.


#8

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