Having trouble with responsive background images

Beginners
1

So I’m still learning my way around Pinegrow and I’m running into an issue with bkg images not resizing correctly with different screen sizes.I know it’s probably something simple I’m missing but I’m stumped.

For simplicity, assume I’m using Bootstrap Blocks, Header 3 and it’s in a new project with no changes or extra content. Whether I add the background image through Bootstrap properties or CSS, the result is the same. The image is 1600px x 800px

Regardless of whether I set to cover, the image still doesn’t change size with smaller displays. It just runs out of bounds.

Any help would be great because I’m stumped.

2

I assume - it’s having to do with the height of the container. To be precise: Height on hero-sections is mostly defined by padding.

So if you set a smaller padding-bottom by setting an @media for .hero (class) it should resize.

Don’t ask me how to set this in Bootstrap. I’ve never used it - and never will.

Cheers

Thomas

1 Like
3

There is a good article over at CSSTricks by Chris Coyier on this topic.

Vince

1 Like
4

Here are two more examples from Creative Tim that you can download and examine which should assist:

https://demos.creative-tim.com/paper-kit-2/index.html

1 Like
5

That’s amazing thank you