how to create a div background that is bigger than its container

Question

what would the best way to create a div that overlaps its parent container. im using bootstrap and want to create a banner that goes larger than its container, i want to create the following:

This is the code i have so far:

<div class="container container-white no-pd">

        <div class="service-banner">
            <div class="text-center">
                Headline title here <a href="#" title="title" class="btn btn-default">Our Services</a>
            </div>
        </div><!--/service banner-->

    </div><!--/container-->

This gives me the following:

any advice?

Answer 1

You could use pseudo elements for this sort of functionality:

.gray{
    height:300px;
    width:100px;
    background:darkgray;
    position:relative;
}
.banner{
    position:absolute;
    width:350px;
    height:100px;
    background:blue;
    top:20px;
    left:80px;
}
.banner:after{
    position:absolute;
    content:"";
    height:0px;
    width:0px;
    border-left:20px solid transparent;
    border-top:20px solid gray;
    bottom:-20px;
    left:0;
}

<div class="gray">
    <div class="banner">Heading here</div>
</div>

Please Note the following for further understanding:

• I've been able to use the top, bottom, left and right properties in my css since I have set that element to position:absolute;. When an element is positioned like this, It means they can be manipulated using these.

• It's also important to note how i made the 'triangle shadow'. This was achieved through using the 'border hack', in which allows you to set a transparent border, and a 'coloured one' in order to make this: see here for more info about this.

• pseudo elements need to contain a content and usually are positioned absolutely in order for you to position them nicely in your markup.