Banner background not resizing properly

Design help General
1

Hey all,

I’m having issues getting my banner to resize correctly. The site is here: http://thebestbuds.webflow.com/#

The background image is resizing properly, but it’s creating a lot of padding below the image and not scaling all the way to the edge of the screen. The image is set to contain, not fixed and not tiled. There is a banner container with a banner image within.

All your favourite
strains like never
seen before

Any ideas?

2

Here’s what I did.-- > http://bannerbuds.webflow.com/

Create a section and give it a class of header.

Add a container / then add your two column area for the logo and menu.

Add a div container for the “Banner” area. Name it banner or whatever you want.

Set your height / 394px

Set the background image to /

  • Cover
  • Center
  • No-repeat

Now you can add a container inside the the banner area and place your text “or image” as I did.

V.

Forgot to ask…

Are you the artist? I occasionally need mascots and the like.

3

Thanks for the reply. This still isn’t quite working properly, as not all of the image is shown when the browser scales up, it expands the image inside the container and then it doesn’t scale down beyond a certain point.

I just want the FULL banner image to scale with the browser, until it gets to the tablet resolution that I’ve set. Basically, the way the image is scaling in my current design is fine, but I want the blue section below it to scale with it

4

Is this more along the lines of what you are after?

http://bannerbuds.webflow.com/

5

It is! Almost anyway. I want that, just without the big blue bar at the bottom, that should be basically pushed up to the the bottom of the image :slight_smile:

6

What settings did you use for this? Thanks

7

https://webflow.com/design/bannerbuds?preview=2f743d3e1cfd589204c30f684b2294ae

Have a look at the public link.

  1. Drag a link block onto your canvas.

  2. Name it so you can style, I called it > header image

  3. Make sure you give it a position of relative.

  4. Drag your banner/image for desktop/tablet in there. It will scale as you can see.

  5. Set display for the image in your setting to desktop/tablet only.

  6. Drag a text block into the “header image” link block.

  7. Name it so you can style it, I name it header text.

  8. Now give it a position of absolute so it clears the image and you can start assigning styles to position it etc.

  9. Now you can move to the tablet and phone views… Drag your secondary banner image into “header image”.

  10. Style and position your text until you get the results you are wanting.

If anyone has a better way, please post it. Just what I came up with with the least amount on containers/blocks.

Regards…

8

You’re amazing! Thank you :slight_smile:

9

I’m learning webflow as well… Glad I could help…!

FBM