I’ve gone through the documentation, but can’t get a handle.
I dropped an image in the backdrop well and set it to cover (not lock bg). The image height is too small (not displaying enough). How do I increase the height of the displayed image? Is it simply by adding content stacks (if necessary, empty container stack?)
How did you get a label on top of the title (in you example on doc page)? I don’t see an option.
I am trying to place a button as close to the bottom of the Jumbotron as possible, but there is quite a bit of an offset built in the I can’t overcome by setting the margins.
It sounds like you’d be better off using a Banner or Backdrop stack for what you want to do, or simply turning off the Title and Sub Title and using your own Header or Page Header stacks instead. That said…
This is a common question as to background images in web design, especially when using cover for the background sizing type.
The image must retain its original aspect ratio. This means that an image will be cropped, scaled, etc to fit within the bounds of the containing stack, but at the same time keep it covering the entirety of the containing stack – in this case the Jumbotron stack.
Think of it like a window in your house. If you’re looking through 5’ x 5’ window from inside your house you can only see a specific portion of the outside world. If your hired a construction worker to resize the window, and had them make it 5’ x 8’ in size you’d see a different view, but you’d still not see the entirety of the world that is right outside your home.
The more content in the stack, the bigger that window gets. Buuuut, if you go past the height of your background image things need to be scaled to make sure it still fills the entire view. In other words the stack knows it needs to cover the entirety of the stack.
You’re best off thinking of the background of stacks like Banner, Jumbotron, Backdrop, etc as simply backdrops for whatever content you put in them.
That is created by hiding the Title and Subtitle and instead using a Header and Paragraph for the main content in the Jumbotron stack. This means you can insert content over the Header – in this case a Label stack.
Not sure what you mean. Without an example it is hard to help. Can you show us what you’re trying to accomplish?
It sounds like you’d be better off using a Banner or Backdrop stack
Yes, probably. This was an exercise in understanding the Jumbotron stack, so I wonder when it would be preferable to, say, a Banner stock.
Buuuut, if you go past the height of your background image things need to be scaled …
There is plenty of height available but not shown. Here’s how it looks with just a default button:
Here’s how it looks when I increase the top margin of the button by 150;
Is there a way of showing a “taller” backdrop without having to push it down with content? That was my question.
If you were using the Banner stack there is the option to create fixed heights. But you were asking about Jumbotron, so I answered in regards to that stack. Fixed heights on a per breakpoint basis can be good for specific cases, but can also bring with it hurdles in a responsive web design you might need to work around. Experiment with it in the Banner stack if you like.
You could use a Margins stack for that to add margin to the top of your button group in that example.
