how to apply background image opacity? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

how to apply background image opacity?

i want to make background lighter.

6th Oct 2016, 8:34 AM
rupali magar
rupali magar - avatar
13 Answers
+ 5
.class { opacity: 0.6; }
12th Jan 2017, 9:14 AM
Firouze
Firouze - avatar
+ 3
.class { position: relative; background: #5C97FF; overflow: hidden; } /* You could use :after - it doesn't really matter */ .class:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; background-image: url('images/background.png'); background-repeat: no-repeat; background-position: 50% 0; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; }
6th Oct 2016, 9:35 AM
Driss Baidou
Driss Baidou - avatar
+ 1
jack i tried as u said n d result is whole elements are affected
7th Oct 2016, 3:52 PM
rupali magar
rupali magar - avatar
+ 1
To solve the problem try rgba system it awesome in css3 or you go search it on w3 school am sure you will find that you are looking for as you can use it to affect only the part that u need to not like opacity which affects everything at once.
12th Jan 2017, 1:20 PM
Cele Prince
Cele Prince - avatar
+ 1
To solve the problem try rgba system it awesome in css3 or you go search it on w3 school am sure you will find that you are looking for as you can use it to affect only the part that u need to not like opacity which affects everything at once.
12th Jan 2017, 1:20 PM
Cele Prince
Cele Prince - avatar
0
opacity tag. default value is 1 you can detract and increase.
6th Oct 2016, 9:38 AM
HawkEye
HawkEye - avatar
0
ty driss
7th Oct 2016, 3:51 PM
rupali magar
rupali magar - avatar
0
the same thing happen to me?
7th Dec 2016, 7:29 PM
Duperoy Dieuseul
Duperoy Dieuseul - avatar
0
I be try many time but I could nt
7th Dec 2016, 7:29 PM
Duperoy Dieuseul
Duperoy Dieuseul - avatar
0
need some one to get deep into this css3 finding it a bit had to understand
17th Dec 2016, 10:09 PM
Cele Prince
Cele Prince - avatar
0
try opacity property elements { opacity:numeric value from 0 to 1. }
24th Feb 2017, 1:56 AM
Kumar Gaurav
Kumar Gaurav - avatar
0
Rupali do it as background: rgb(255,255,0,0.6); There is another way.. <div class="backgroundimg"> </div> <style> .backgroundimg { position: absolute; background-image: -webkit-linear -webkit-linear-gradient( 0deg } </style> Hope This one will help you..
24th Sep 2017, 5:47 AM
Saurav Sony
Saurav Sony - avatar
- 1
https://code.sololearn.com/W2fzI2WhflM6/?ref=app your background tag shouldn't wrap other elements tag . it will be effects by opacity to prevent other elements effects by opacity, put your background elements tag out of body tag
11th Oct 2017, 8:47 PM
林偉雄
林偉雄 - avatar