CODEWITHSUNDEEP
csstwitter-bootstrap
gwrightiv
gwrightiv

Reputation: 1

Overlaying div across jumbotron

I'm a complete noob with programming. I am working on a project and I can't figure out the last piece. I am using bootstrap to create a jumbotron and I want to create an overlay with text information. Below is my code.

Thanks.

<div class="jumbotron" style="background-color: white;" >
    <img class="img-responsive"  src="images/sanDiegFallback.png"> 
        <div class="overlay">
            <h1>ReCon 2015</h1>
                    <div class="fadeInDown">
                        <p>October 14-16, 2015</p>
                    </div>
                    <div class="fadeInDown2">
                      <p>Marriott Marquis<br />San Diego, CA</p>
                    </div>
                    <div class="fadeInDown3">
                     <p>Registration open now<br />
                        <span style="font-size: 14px; line-height: 18px;">(Watch your inbox for details)</span>
                    </div>
                    <div class="fadeInDown4">
                     <a class="cta" href="https://twitter.com/intent/tweet?text=Save+the+date+for+%23ReCON2015+in+San+Diego%3A+October+14-15+http://is.gd/FkQv3k+%40SVISanDiego" style="background-color:none;
                background-image: src(images/twitter_bg.png);
                border:2px solid #ffffff;
                border-radius:25px;
                color:#ffffff;
                display:inline-block;
                font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif;
                font-size:18px;
                line-height: 18px;
                text-decoration:none;
                padding: 15px 35px;
                text-indent: 20px;
                " target="_blank">Share on Twitter</a>
                    </div>
    </div>
</div>

Upvotes: 0

Views: 1623

Answers (2)

Bryan Mudge
Bryan Mudge

Reputation: 432

How about adding a class to the jumbotron like

.jumbotron .withImage{
   background: url(../pathToImage);
   background-size:contain;
}

that way whatever you put over it will be over your image.

Upvotes: 0

NikWins
NikWins

Reputation: 46

You're not really clear, but if I get you right, you could just make the overlay position: absolute and add top: 0; left: 0; right: 0; bottom: 0;. If it's not already, your jumbotron has to be position: relative;. With this technique your overlay will be the same size as your jumbotron. Depending on what you are really trying to do, you could have to add a higher z-index to the overlay.

Upvotes: 1

Related Questions