# Adding Image and Mask to Bootstrap Jumbotron



## howard.a.s (Jul 22, 2005)

Template https://startbootstrap.com/templates/heroic-features/

Please, how would I modify this


```
<!-- Jumbotron Header -->
      <header class="jumbotron my-4">
        <h1 class="display-3">A Warm Welcome!</h1>
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.</p>
        <a href="#" class="btn btn-primary btn-lg">Call to action!</a>
      </header>
```
so as to include a full sized background image with a pattern mask overlay (for instance '.pattern-1') as described here

https://mdbootstrap.com/docs/jquery/css/masks/

I have tinkered around for quite a while but cannot seem to achieve the desired results.

Any help would be very gratefully received.


----------



## JiminSA (Dec 15, 2011)

Yo Howard! Long time no hear
I'm not sure if you would like to *replace* the "A Warm Welcome" panel with a full width jumbotron "masked" photo or *add* said photo above or below the panel, before the "Card titles", but assume that you want to keep "Card titles" in either scenario?
If you would be kind enough to clarify?


----------



## howard.a.s (Jul 22, 2005)

Hi Jim! Thanks for your kind offer of help and belated New Year best wishes. I hope you and yours are keeping well.

Here is what I have already.


```
<header class="jumbotron my-4" style="background-image:url('img/my_image.jpg');background-size:100% 100%">
<h1 class="display-3">Some text</h1>
<p class="lead">Some more text</p>
<a href="#" class="btn btn-primary btn-lg">Call to action!</a>
</header>
```
What I would like to do is to place a dotted (or similar) effect (mask/overlay/layer?) over my Jumbotron image to create an effect similar to some of the examples shown in the link I posted previously - similar to patterns 1 thru 8.

I am guessing this can be done by tiling a small image effect over my larger background image and adjusting its transparency to suit. I expect it might also be possible to use a single larger image instead? I am also guessing that I would need to use the z-index property so as to stack the tiled image above my main image - or perhaps the dotted image as my background and the main image as a transparent foreground - not sure which is the accepted way of doing this.

If I wanted to swap out the chosen pattern for a simple transparent colored layer instead, how would I alter the code to do this? Whether using patterns or colors, hopefully the text over my main image will stand out more prominently. Please do you know any sites that provide pattern effects that can be experimented with until I find one that I like, or can a pattern effect be achieved purely by using CSS?

Just briefly returning to the link I posted previously - the one pointing to mdbootstrap.com. To use their examples I guess I would need to download and install the software they provide. Would this be an easier or more technical way of achieving a patterned effect?

I also need to create a simple visitor site map that will integrate with Bootstrap and be responsive. Do you know of any free examples I could use as my starting point for this?

I hope that all of what I have written makes sense.

Any advice gratefully received.


----------



## JiminSA (Dec 15, 2011)

Sorry for the slow response, but I am a long-time Liverpool FC fan and have just finished watching them destroy Southampton ...
Anyways, you are looking at image overlaying using css.
Take a look at _*this tutorial *_- I hope it inspires you (remember, KISS)
Regarding a visitor sitemap, I'm not quite sure what you are after tbh - perhaps a pictorial image of a website?


----------



## howard.a.s (Jul 22, 2005)

Hey! Good to hear that your team won the match. Congratulations  I think I might be able to construct a sitemap using something I have since stumbled upon while Googling https://www.astuteo.com/slickmap/
As for the tutorial, I have already previously read this and unfortunately it makes no sense to me how I would integrate the suggested code into my existing code so as to overlay my main image with a pattern mask. The tutorial talks about adding the suggested code to the BEFORE section of my Divi Image Module, only I don't have one of these, only a page of source code. I was hoping I could perhaps just add a new line of code in to my existing source code including a link to my chosen pattern effect and then add some inline styling to set the transparency, tiling effect, etc. Perhaps it isn't as simple to do this as I imagined it might be?


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> I think I might be able to construct a sitemap using something I have since stumbled upon while Googling


That can work
I was going to suggest that you could DIY using bootstrap _*tabs and button *_- however you want to roll ...


howard.a.s said:


> I was hoping I could perhaps just add a new line of code in to my existing source code including a link to my chosen pattern effect and then add some inline styling to set the transparency, tiling effect, etc. Perhaps it isn't as simple to do this as I imagined it might be?


You are definitely on the right track ... Allow me to look at this tomorrow, please, as Sunday is my day of rest!


----------



## howard.a.s (Jul 22, 2005)

Still on the subject of sitemaps, I also came across this https://codepen.io/JacobLett/full/bEvqLg which is perhaps an even simpler layout and should work just as well. Thanks for offering to take a look at the patterned overlays. I hope you are able to make this work where I have so far failed, and without spending too much time on your rest day.


----------



## howard.a.s (Jul 22, 2005)

Just quickly, and hopefully to save you a little time, I came up with this

```
<div class="overlay" style="position:absolute;width:100%;height:100%;background:#000;opacity:0.2;transition:all 0.2s ease-out;"></div>
```
which I tried inserting here

```
<header class="jumbotron my-4" style="background-image:url('img/my_image.jpg');background-size:100% 100%">
<div class="overlay" style="position:absolute;width:100%;height:100%;background:#000;opacity:0.2;transition:all 0.2s ease-out;"></div>
<h1 class="display-3">Some text</h1>
<p class="lead">Some more text</p>
<a href="#" class="btn btn-primary btn-lg">Call to action!</a>
</header>
```
and which certainly appears to place a layer over my background image, with adjustable transparency, but which also appears to affect the text over my background image by making this less visible too. I guess I must be inserting my new code into the wrong place? Mind you, this is not exactly what I had wanted to achieve anyway, as I really wanted to overlay my image with a pattern and not just a color. This leads me to wonder whether if I changed background:#000; for a link to a pattern image this would overlay pattern instead of a color? 

In the original bootstrap code, when linking to my main background image I have used background-image:url but what difference would it make if I were to use background:url instead.

 When adding a pattern overlay, would it be more technically correct to use background:url when linking to the pattern and background-image:url when linking to the main background image? 

Please can you suggest how I should alter my code so as not to also affect the text and to add a pattern image and not just a color? Perhaps you will come up with a far better way of doing this anyway!


----------



## JiminSA (Dec 15, 2011)

By using background-image: you can only use that line of css code to furnish the url.
Whereas, if you use background: you can use that line of css code to furnish the url; the color; the repeat options and the size ...
I think that if you play with z-index on your .overlay; .display-3 and .lead classes, you can make your text prominently visible ...
Getting there


----------



## howard.a.s (Jul 22, 2005)

So, changing 'background-image:url' to 'background:url' will allow me to include z-index property, position, etc.?

As my overlay is set to absolute, how should I set my main background image - position: absolute, position: relative, position: fixed, or position: sticky?

Not sure what I'd do with .display-3 and .lead classes. Would these be included as inline css and adjusted only if I am unable to get my text to display over the dotted overlay effect by using the z-index?

In your opinion, where would I best find a patterned image of perhaps a few pixels square which I can set to tile the area?

Thanks for your help so far


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> So, changing 'background-image:url' to 'background:url' will allow me to include z-index property, position, etc.?


Nope - only background properties ...


howard.a.s said:


> As my overlay is set to absolute, how should I set my main background image - position: absolute, position: relative, position: fixed, or position: sticky?


Use trial and error between absolute and relative (ignore fixed and sticky) ...


howard.a.s said:


> Not sure what I'd do with .display-3 and .lead classes. Would these be included as inline css and adjusted only if I am unable to get my text to display over the dotted overlay effect by using the z-index?


Yup - as I say, trial and error testing is a great way to learn how properties visualise ...


howard.a.s said:


> In your opinion, where would I best find a patterned image of perhaps a few pixels square which I can set to tile the area?


Google images - search on overlay patterns (pay attention to copyright, though) ...


----------



## JiminSA (Dec 15, 2011)

Maybe *this link* will be useful


----------



## JiminSA (Dec 15, 2011)

I was trying to get you to find the solution, Howard. But have decided it's best to partly furnish it and let you see how it operates (the following solution could be adapted to use your Jumbotron header) ...
This could be your html:

```
[IMG alt="My Image."]image path[/IMG]

.mypattern
```
... and this could be the supporting css:

```
.view .mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
}
.mypattern {
    background: url(overlay image path);
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: fixed;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background-attachment: fixed;
}
.white-text
{
    color: #fff !important;
}
```
... obviously the 'image path' and 'overlay image path' you would need to change to point to your image and it's overlay ...
Are you up to using this example to adapt your Jumbotron code?


----------

