How to change opacity of body background-image in css? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

How to change opacity of body background-image in css?

help

19th Nov 2017, 5:27 PM
anni
anni - avatar
15 Answers
+ 6
anni why not try an <IMG> tag and set its opacity and give the IMG the widths and heights of the body so it looks a background IMG?
19th Nov 2017, 6:52 PM
᠌᠌Brains[Abidemi]
᠌᠌Brains[Abidemi] - avatar
+ 4
body{ opacity:0.5; background-image:URL("my image"); }
19th Nov 2017, 5:35 PM
᠌᠌Brains[Abidemi]
᠌᠌Brains[Abidemi] - avatar
+ 4
Try googling it or something!
19th Nov 2017, 6:27 PM
᠌᠌Brains[Abidemi]
᠌᠌Brains[Abidemi] - avatar
+ 3
hmm anni I'm not too good with html,im really sorry!
19th Nov 2017, 6:26 PM
᠌᠌Brains[Abidemi]
᠌᠌Brains[Abidemi] - avatar
+ 2
I believe it would be : body { background-color: red; opacity: 0.5; } or try: body { background-color: rgb (0, 0, 0); background-color: rgba (0, 0, 0, 0.5); }
19th Nov 2017, 5:38 PM
Michael Hawkins
Michael Hawkins - avatar
+ 2
oh you said image :/
19th Nov 2017, 5:40 PM
Michael Hawkins
Michael Hawkins - avatar
+ 2
In stack overflow they say the easiest way is to use an image editor to make an image transparent and then add it into your code, otherwise you need to figure out how to target the child element without affecting the parent element or sibling elements. they suggest the photo editor called Gimp.
19th Nov 2017, 6:58 PM
Michael Hawkins
Michael Hawkins - avatar
+ 1
@Brains Thanx for your ans but it is not working. i tried it before but it changes opacity of whole elements in html page but doesn't change the opacity of body back-ground image.
19th Nov 2017, 6:10 PM
anni
anni - avatar
+ 1
Maybe it SHOULDN'T be possible to do? What's behind the background anyway??? By definition the background is the BACK image - there's litteraly nothing behind it. If it didn't have 100% opacity, there should be something behind it
19th Nov 2017, 7:00 PM
Augustinas Lukauskas
Augustinas Lukauskas - avatar
+ 1
You could use linear-gradient with background image, linear gradient would make a layer of color toward the background image. background-image: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,.5)), url(image.jpg); https://code.sololearn.com/WGeXCDL6IMRg/?ref=app
20th Nov 2017, 12:19 AM
Calviղ
Calviղ - avatar
+ 1
I think Michael is rite and logic of Augustinas is also true.
20th Nov 2017, 9:09 AM
anni
anni - avatar
0
Anybody wants to help to plzz resolve this
19th Nov 2017, 6:11 PM
anni
anni - avatar
0
According to me it is not possible in css to change opacity of body background image
19th Nov 2017, 6:12 PM
anni
anni - avatar
0
Or I might be wrong
19th Nov 2017, 7:03 PM
Augustinas Lukauskas
Augustinas Lukauskas - avatar
- 1
I m trying since morning 😀 but found nothing.
19th Nov 2017, 6:29 PM
anni
anni - avatar