Multiple background images with different heights

Question

I am trying to have a Bootstrap Jumbotron that contains 2 background images. The general idea is as illustrated in the attached image. At the bottom layer is a full width photo (indicated in gray) and on top of it is a transparent PNG (indicated in yellow). The height of the Jumbotron is set at 350px, which is for the full-width photo. Having said that, I would like to top layer to go beyond 350px so it is overlapping the text in the div below the Jumbotron. How would you suggest me to achieve this?

Example

I have some HTML markup as follows:

<body>
<section class="jumbotron">
    <h1>Tag line in a Bootstrap Jumbotron</h1>
</section>

<section>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet,...</p>
</section>
</body>

I have the following CSS:

.jumbotron {
     background-image: url("top.png"), url("bottom.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: 50% 0%;
     height: 350px;
}

With these codes, I am able to stack the 2 background images properly so that the transparent top layer is sitting nicely on top of the bottom layer. However, I do not know how I can make the top layer go beyond the 350px such that it can overlap the text below.

Any suggestion will be greatly appreciated. Thanks!

* UPDATE * So I attempted in answering my own question. I made some progress but the solution does not seem complete. Here's what I did...

I added an additional div to only hold the top transparent PNG layer and use negative margin to push it up to cover the jumbotron. But when I did that, the tagline in the jumbotron can no longer be highlighted/selected. It appears as if the top transparent PNG layer is covering it up. I tried playing with z-index but that didn't help. Here's my updated HTML:

<body>
<section class="jumbotron">
    <h1>Tag line in a Bootstrap Jumbotron</h1>
</section>

<section class="container-fluid">
    <div class="row">
        <div class="png-layer"></div>
    </div>
    <div class="content row">
        <div>
           <h2>Title</h2>
           <p>Lorem ipsum dolor sit amet,...</p>
        </div>
    </div>
</section>
</body>

Updated CSS:

.jumbotron {
     background-image: url("bottom.jpg");
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-position: 50% 0%;
     height: 350px;
}
.png-layer {
     background-image: url("top.png");
     height: 500px;
     margin-top: -350px;
}
.content {
     margin-top: -200px;
}

Any ideas on how to fine-tune to solution to make it to perfection? Thanks!

Answer 1

The best approach is (in my opinion and as you correctly pointed out in the update to your question) to create a div that exclusively holds the .png you want to overlay on top of the Jumbotron and the text. The CSS of this element should include:

z-index:xxxx; where xxxx is whatever value allows your div to be shown on top of the image you intent to use as a background (ie higher than its containing div ) but lower than the text you want it to appear under. Also remember that z-index works only on elements for which you have defined the position attribute.
pointer-events: none; so that you can still select the text below it.

Good luck.

Multiple background images with different heights

Question

1 answers

solution1
0 ACCPTED 2016-01-13 21:43:22

Multiple background images with different heights

Question

1 answers

solution1 0 ACCPTED 2016-01-13 21:43:22

solution1
0 ACCPTED 2016-01-13 21:43:22