I have been struggling to apply opacity to my background image while still being able to see and write text on it. I have tried various methods but either the text is visible without the ability to write on it, or only half the screen is covered with the background image. I am hoping to find a solution here.
* { margin: 0; padding: 0; }
/* Centering */
body
{
text-align: center;
}
/* Title Size and Font */
#title
{
font-size: 40px;
font-family: Mv Boli, sans-serif, arial;
}
/* Description Size and Font */
#description
{
font-size: 20px;
font-family: Mv Boli, sans-serif, arial;
}
/* Background Image */
.background-image
{
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: -5000;
background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/* Survey Form Styling */
#survey-form
{
background: hsl(204, 94%, 65%);
max-width: 500px;
margin: 50px auto;
padding: 25px;
}<body>
<h1 id="title">Survey Form for Tech</h1>
<p id="description">Help us improve your experience!</p>
<!-- Background Image -->
<div class="background-image"></div>
<!-- Survey Form -->
<form id="survey-form">
<div class="form-flow">
<label for="name" id="name-label">Name</label>
<input id="name" type="text" required="" placeholder="Enter your name">
</div>
</form>
</body>The issue was resolved after discovering that there were conflicting URLs for the image source.