Responsive image background-repeat: no repeat

Beginners
1
  1. How do I scale responsively with no repeat in Bootstrap 5? The white little dots in background image panel don’t seem to work. Any tutorials or documentation on inserting banner images?

<section class="background-center-top bg-dark pb-5 position-relative pt-5 text-white" mages LA_lavender996w.jpg");" style="background-image: url('images/LA_lavender996w.jpg'); background-repeat: no-repeat; background-size: cover;">

  1. Any documentation for Using custom page dividers in Pinegrow - YouTube?
    In Bootstrap 5 where is Container>Size>Fluid, shown in above BTS 4.6 tutorial?
    Screen Shot 2021-08-06 at 10.07.59 AM
    Screen Shot 2021-08-06 at 10.07.59 AM507×1150 144 KB
2

Hi @kat,
I’m not sure exactly what you are trying to achieve. Do you want the single background image to change size with page resize, or…?

The img-fluid class is added from the properties panel. With the img selected it will be in the ‘Image Options’ section.

image
image810×1590 80.8 KB

Cheers,
Bob

3

I’m using a background image.

  1. Might I be better inserting an img instead of a background image?
  2. How do I get the background image to stop repeating?
  3. How do I get the background image to size responsively?
  4. Any recent PG bootstrap tutorials/documentation on how to work with images vs background images?

Thanks for your help

4

How you best put the image into the section is going to be dependant on what other elements are in the section/what you are trying to achieve.
Is the code you have at the top your attempt at putting the background image in? If so, you have an error that might be impacting your inline styles. Otherwise, the styles you have added should prevent repeat and cause the image to resize with the section.
Bob

5

So much to learn. Appreciate your being here. Await future tutorials ; )
Kat