Change background image

[nikostzounakos]

Hello!

I have bought a template which is having a nice raining effect on the landing page, but I just want to change the background image to something else.
The problem is that when I do this, the raining effect is getting beyond the background, and it seems to working only with the default image.
Even when I put a solid color as a background the effect is getting hidden.

Maybe someone knows better how to do this.

Here is the template.
http://html.lionode.com/jobado/layout/home_neon_rain.html

The background image is on this div

Is this something doable?

[Martyr2]

Well first start with an image that is the same size. Second notice that the banner2.png is somewhat transparent. What they have done is made the background color black, but then made the banner image somewhat transparent so the black shows through the image. This creates the effect of having the image blend in with the background.

So you have a few options, first you can create a semi-transparent background image that works with the color of the background or create a solid background image that will adjust to the full width and height of the rain effect.

[PaulOB]

@nikostzounakos

Is this something doable?

This is a bit of a hack as @Martyr2 has given the correct solution but you could possible get away with this.

.banner-detail{background-image:none;}
.banner-detail:before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url(https://picsum.photos/id/1015/200/300) no-repeat;
background-size:cover;
opacity:0.5;/* allow to be transparent*/
}
.cd-intro{position:relative;}

[appquora]

You know the best option for changing the image on any website is to use the same size as the original image so that it will not get collapsed.

[nikostzounakos]

Really great solutions thank you so much!!!