Hey there! I'm currently facing an issue. I want to create a semi-transparent background image for my div, but I want the text inside to remain fully visible. Any suggestions on how to achieve this? Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Stack</title>
<style type="text/css">
#recipebackground{
/* The image used */
background-image: url("../imgs/ajiacobackground.jpg");
/* Full height */
height: 50%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/*opacity*/
opacity: 0.5;
}
</style>
</head>
<body>
<section id="recipebackground" class="opacitybox">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<section>
<div class="container" >
<h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
Please keep in mind that I am using bootstrap in my file. Appreciate any help. Thanks again!