background opacity

background image opacity

by Sanjay

HTML

<div class="wrapper">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
    </div>
</div>

CSS

html,
body,
.wrapper {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrapper {
    position: relative;
}

.wrapper:after {
    content: "";
    background-image: url("http://www.menucool.com/slider/prod/image-slider-4.jpg");
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: .4;
}

.inner {
    width: 40%;
    margin: auto;
    padding: 20px 10px;
}