0

How I design background image with overlay in CSS like this example image.

here the code. i want to add tour class to background image and overlay effect. 

<div class="tour">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

            </div>
        </div>
    </div>
</div>

example screenshot

ApsaraAruna
  • 136
  • 2
  • 13

4 Answers4

1

you can use this code

HTML

<div id="wrapper">
    <img src="image-file" alt="">
    <div class="overlay"></div>
</div>

CSS

#wrapper {
    position: relative;
}
.overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
}
Morteza QorbanAlizade
  • 1,520
  • 2
  • 19
  • 35
0

you should have added more information in to the question, but Is this what you want?

CSS for this:

.background {
  background:url('BackgroundImage.png');
}

.layer {
  background-color: rgba(248, 247, 216, 0.7)
  width: 100%;
  height: 100%;
}

HTML for this:

<div class="background">
  <div class="layer">
  </div>

Hope it helps :)

blobbymatt
  • 317
  • 1
  • 2
  • 17
  • @backslash Have a look at this thread - [link](http://stackoverflow.com/questions/9182978/semi-transparent-color-layer-over-background-image) – blobbymatt Sep 02 '16 at 09:28
0

It goes something like this:

<style>
    .div-image{
        height: 200px;
        width: 400px;
        background-image: url(demo.jpg);
        background-repeat: no-repeat;
    }
    .overlay{
        height: 200px;
        width: 400px;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 255,0.5);
    }
</style>

<body>
    <div class="div-image"></div>
    <div class="overlay"></div>
</body>
Pranjal
  • 1,088
  • 1
  • 7
  • 18
0

Try Below Code

HTML

<div class="img-wrapper">
    <img src=".." />
</div>

Style

.img-wrapper {
    position: relative;
}
.img-wrapper:after {
    content: "";
    background-color: rgba(37,131,173,0.5);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
Rockers Technology
  • 477
  • 4
  • 12