How to display background semi-transparent image

0.00/5 (No votes)

See more:

I follow some of the answer of this, But I still didn't get it.
It display blank on my page.

What I have tried:

.container{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient (to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%),url('images/background.jpg');
	background-position: center;
	background size: cover;
}

.container{
	width: 100%;
	height: 100vh;
	background-image: linear-gradient (rgba(0, 0, 0, 0.7)  rgba(0, 0, 0, 0.7) ),url('images/background.jpg');
	background-position: center;
	background size: cover;
}

Posted 5-Sep-22 6:34am

FOO XIN CHEE (笑)

Updated 5-Sep-22 6:44am

Add a Solution

Comments

[no name] 6-Sep-22 1:35am

if you want a transparent background, you need to use PNG, because of the alpha canal.
this type of file handle 'transparency'.

jpg are more simple, so the alpha canal is not in.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Last 24hrs

This month

Avtem	35
Member 16007013	10
urikoth	10
Member 16391654	10
Himansh jain	5

Pete O'Hanlon	280
Richard Deeming	230
Richard MacCutchan	135
merano99	130
OriginalGriff	130

How to display background semi-transparent image

Add your solution here

Preview 0

How to display background semi-transparent image

Add your solution here

Preview 0

Existing Members

...or Join us