Layer over Image and stack flow

Bootstrap Studio Help
1

Hello, I´m new with Bootstrap Studio and I´m not a realy a geek in web codeing. The most thing in BS, I discover step by step, but I looking for an effect for Background images. When I drag a jumbotron div into the canvas and change the background image. I missing 4 things.

  1. How can I put a transparent colored layer over the background image? I can´t find this option in the right panels
  2. How can I let shrink den Background image to the size of the jumbotron div? There is noch toggle on the right side to make this repsonsive
  3. How can I put a scroll arrow on the bottom which is moving the content down to the next block and has a shifting effect for the background image. Like a jalousie.
  4. How can I set the hight of the jumbotron background to auto so the Text content set the hight Anyway, may the jumbotron is the worng tool for my case?

Thanks for any hint.

Cheers gieri

2

For #1

In old'n days you would add to the CSS for the jumbotron class position:relative so that you can add to the jumbotron component an absolute positioned DIV (position:absolute).

Old way:

  1. add to `.jumbotron` CSS `position:relative;`
  2. drag/drop `DIV` element just before the `h1` element
  3. give that div a class something like `jumbotron-overlay`
  4. create a CSS rule for `jumbotron-overlay`
  5. give that rule the following properties and values
.jumbotron-overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5); /* or use transparent pixel.gif like below */
    background:url('pixel.gif') repeat; /* only if your not using the rgba method */
}

That should allow the transparent DIV to sit in between the background and other elements in the jumbotron. If not then you will have to add properties like, z-index:0 and greater, to the overlay and the other elements to get them to stack correctly. But it might just work with the natural order so give that a try first if using this method.

New way:

  1. CSS3 Multiple Backgrounds
  2. create a transparent pixel.gif image of the color and transparency you want.
  3. import the pixel.gif file to your project
  4. (using the Hero Food jumbotron as example) update your CSS for the jumbotron like this
div.jumbotron.hero-food {
  color:#fff;
  text-align:center;
  background-image:url('pixel.gif'), url('hero-background-food.jpg'); /* only thing changed was this line */
  background-size:cover;
  background-position:center;
  padding-top:100px;
  padding-bottom:100px;
}

The first image is the image on top of all other images that come after it. The background-size:cover; already causes the pixel image to cover over the whole food background image.

Here is a site to look at regarding CSS3 Multiple Backgrounds https://www.w3schools.com/Css/css3_backgrounds.asp

If you don't have something to create a transparent pixel.gif, then I would recommend paint.net image editor (https://www.getpaint.net/index.html). It's free.

Saj

3

For #2

Select the element with the background image you want to have sized to it's parent element container. i.e. the DIV with the class jumbotron :)

  1. In the Options pane on the top right click on the Painters Wheel (or whatever that is called) Icon
  2. click on the Style Attribute drop down and select the CSS block for the jumbotron
  3. scroll down to Bg Image and click it's arrow to expose additional tools
  4. set the Size to cover

Saj

4

For #3, sounds like a parallax effect that I have not worked with so I can't help you there.

For #4, seems to me that same thing as #2 really, so I'll leave it at that. Whether or not it's the right tool is a decision I think you will have to make for your self. Play around with things, check out the Heros are they are doing very much what you're already talking about for the most part. Just change the background image to one you want and update the CSS accordingly etc...

Saj