▼
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.

40
Screen Shot 2018-02-12 at 23.18.40.png227x513 18.2 KB

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.

closed #8

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