How to get opacity of background image? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 5

How to get opacity of background image?

in <style> body{background-image:url("image.jp"); } </style>

5th Jun 2018, 1:10 PM
keev23i
keev23i - avatar
7 Answers
+ 4
selector { position:relative; } selector::before { position: absolute; content: ""; z-index:-1; opacity: 0.5; background: <path>; top: 0; left : 0; }
5th Jun 2018, 1:43 PM
Gopal Gautam
Gopal Gautam - avatar
+ 2
how to shape the image
5th Jun 2018, 1:57 PM
keev23i
keev23i - avatar
+ 1
no size of a picture
5th Jun 2018, 2:02 PM
keev23i
keev23i - avatar
0
Or you can apply styles to a child div HTML: <div class="setion"> <div class="section__background-image"></div> </div> CSS: .section__background-image { position: absolute; z-index: -1; width: 100%; height: 100%; background-image: url('your.jpg'); background-size: cover; opacity: 0.7; top: 0; left: 0; bottom: 0; right: 0; }
5th Jun 2018, 1:56 PM
Bohdan Mohitych
Bohdan Mohitych - avatar
0
Do you mean 'background-size'?
5th Jun 2018, 2:01 PM
Bohdan Mohitych
Bohdan Mohitych - avatar
0
Try to change percentages of 'width' and 'height' properties... For example, instead of 100% try 50% or whatever you need
5th Jun 2018, 2:09 PM
Bohdan Mohitych
Bohdan Mohitych - avatar
0
how to use background image in html
6th Jun 2018, 2:24 PM
deepak
deepak - avatar