Background Transparent but not Text

Question

I'm Having a problem... I want to make my background picture semi-transparent. However I want my text inside the div to be fully visible. Any tips? 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>

Also take note that i'm using bootstrap in my file. Thank you

score 1 · Accepted Answer · answered May 19 '18 at 19:39

There are multiple things you are missing out. First the structure itself is wrong. Using so many br tags is incorrect. Considering you are new to this portal, you should have researched bit more about background opacity.

.container{
  position: relative;
      /* The image used */
    background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");

    /* Full height */
    height:100vh; 
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.background {
  height: 100vh;
  background: rgba(255 , 255, 255, 0.5)
}
.text-center {
  padding:50px 0;
}

<div class="container" >
<div class="background">
  <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

Check the snippet for a small preview/idea of what you can do.

As a side note: this work if and only if the background-color where you applied the opacity is the same as the background color of the image — Temani Afif, May 19 '18 at 20:07
This worked, kind of; See, when using bootstrap it wont fully make the image transparent, but rather sides would show the normal opacity of the picture..... — Alejandro Carvajal Sarria, May 19 '18 at 20:30

Background Transparent but not Text

1 Answers1