Hi please am a beginner HTML. How can I design a background with a picture and make the picture faint or faded. Thanks

Question

HTML

Answer 1

https://code.sololearn.com/WlkjRum5ePcG/?ref=app

Answer 2

<div id="div-id"></div>

div#div-id {
/* set the background image */
background-image: url(path to image here);
/* also create a background color in this case
white, with the opacity that you want for your background, in this case 0.5 (50%) */
background-color: rgba(255, 255, 255, 0.5);
/* now use the blend mode to apply both */
background-blend-mode: lighten;
}

Note this won't work with all browsers. Especially anything older than IE 11.
https://caniuse.com/#search=background-blend-mode

Other options would be to use an image <img> and set its opacity. Then place the contents you want over the top of the image with an absolute position. You may also modify the images opacity itself with Photoshop or some other image editoring software and save it as a png with the desired opacity.