-5

I am able to set a background image that covers a page but the green overlay does not work. What am I doing wrong? Thank you.

body {
    margin: 0 auto;
    padding: 0;
    background: url("../images/worldmap.jpg") no-repeat rgba(0,255,0,.5);
    /*background-image: url("../images/worldmap.jpg");*/
    /*background-repeat: no-repeat;*/
}
martinb
  • 135
  • 1
  • 3
  • 13

3 Answers3

2

you may try this...

body {
    margin: 0 auto;
    padding: 0;
  background-size:cover;
  background:linear-gradient(0deg,rgba(0,255,0,.5);,rgba(0,255,0,.5);),url("../images/worldmap.jpg");
}
Ravi Kadyan
  • 323
  • 1
  • 9
0

Try this

.overlay-image {
  width: 300px;
  height: 200px;
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45)),   url(https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg);
}
<div class="overlay-image"></div>
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
0

I solved it by adding the url for the background image at the end of the line.

.page{
        background: -moz-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -webkit-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -webkit-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -o-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: -ms-linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        background: linear-gradient(rgba(0,255,0,.5)), url('https://www.nepalitrek.com/wp-content/uploads/2017/09/langtang-gosaikundaintro.jpg') no-repeat;
        margin: 0 auto;
        padding: 0;
}
Sngeeta_Dev
  • 1
  • 3