CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3362364
user3362364

Reputation: 477

Text going out of the container div

the css code: 

    #overlay {
        background: rgba(0,0,0,0.8);
        position: absolute;
        z-index:100;
        width: 100%;
        color:#fff;
        height: 100%;
    }

the html code:

    <div class="container" style="border:1px solid #000;">
    <div class="row">
        <div class="col-md-12">
             <div id="overlay">Overlay</div>
                    Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. Here goes the brief introduction of the company which has branded it's logo religious in almost its entire brand and now the world knows about it. 
             </div>
        </div>
    </div>

For some reason, i can't get the background overlay to show in the container. Check out the Demo: http://www.bootply.com/PJiifhEI8u

Upvotes: 1

Views: 2535

Answers (1)

APAD1
APAD1

Reputation: 13666

Just add top:0; and left:0; positioning to the CSS:

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width: 100%;
    color:#fff;
    height: 100%;
    top:0;
    left:0;
}

Updated Bootply

Update based on your comment:

One way to add the padding to the overlay would be to use calc to make the overlay 30px less than 100% and then add a 15px left margin to center it:

#overlay {
    background: rgba(0,0,0,0.8);
    position: absolute;
    z-index:100;
    width:calc(100% - 30px);
    color:#fff;
    height: 100%;
    top:0;
    left:0;
    margin-left:15px;
}

Bootply

Upvotes: 1

Related Questions