The background remains transparent while the text appears opaque

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!

Answer №1

There are a few key points that you may have overlooked. First and foremost, the structure of your code seems to be incorrect. The excessive use of
tags is not recommended. As a newcomer to this platform, it would have been beneficial to conduct more research on 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>

Take a look at the code snippet provided for a glimpse of what you can achieve.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating Calendar Features into a Traditional .html Website

Currently working on integrating a calendar function into an HTML site. Want to enable my client to easily manage their own calendar by inserting a code snippet from platforms like Google Calendar into a div on the website. As a professional SEO with web ...

Active Tab Indicator - Make Your Current Tab Stand Out

I currently have a set of 3 tabs, with the first tab initially highlighted. I attempted to use some JQuery code in order to highlight a selected or active tab, but for some reason it is not working as expected. Any assistance would be greatly appreciated. ...

Utilizing Timer Control for Image Rotation in Presentations

I have two sets of images named Div1 and Div2 that need to be displayed in a slideshow. The condition is as follows: For the first seven days, I want the images from the first set, Div1, to appear in the slideshow. Once the seven days are over, the images ...

Button that floats and leads to the previously visited page

Looking to incorporate a button that moves with the user's scroll or remains fixed at the bottom of the window. I have detailed instructions on certain pages (e.g. /georgia-insurance-license) that contain links to other related posts (e.g. How to Pas ...

Bind a function to the final element of each piece of changing content

I'm facing a challenge in associating a function with every nth element, just once for each element. The concept is to trigger an ajax call when the final element comes into view. I am utilizing a useful jquery plugin called inview. My list consists ...

Employ gulp for rebasing CSS URLs

I have a question regarding how to resolve the following issue: In my sass files, I utilize absolute path variables in my main include files. For example, fonts are stored in /assets/fonts/... and icons are located in /assets/icons/... These paths only wo ...

Button that vanishes when clicked, using PHP and HTML

I am in the process of creating an online store and I am seeking to implement a button that directs users to a new page, but then disappears permanently from all pages within the store. Here is the code snippet I have developed so far: <input class="b ...

The error message "ReferenceError: $ is not defined" is displayed within

My current requirement involves loading templates within an iframe, and to achieve this, I have implemented the following code: <div class="col m8 l8 s12 margin-top-30" id="hue-demo-bg-div"> <iframe id="myiframe" src="/themes/{{$themeid}}.ht ...

Is there an obstacle hindering the load event?

There's something strange happening on a website I created. The page content loads in 5 or 6 seconds, but the DOMContentLoaded and Load Event don't actually fire until 1 minute and 10 seconds later. When I reload the page during loading, it load ...

Implementing a sorting mechanism for ajax data retrieval

Currently, I am using the code below to save HTML created with jQuery in a database and retrieve it later: $('div[read]').each(function(){ var kelas = $(this).attr('kelas'); $.post('admin.php',{kelas:kelas,id:id},func ...

Element is not perfectly aligned with the bottom; Slightly below the bottom edge

Why does an element positioned absolutely within a div that has relative positioning end up slightly lower than the bottom of the parent div? What can be done to fix this issue without just adjusting the bottom value on .hoverAction? function showFileUp ...

What is the best way to manage the 'content' attribute in TSX?

I'm currently developing an application that utilizes schema.org. In the code snippet below, you can see how I've implemented it: <span itemProp="priceCurrency" content="EUR">€</span> According to schema.org do ...

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

Leveraging Modernizr for identifying drag and drop functionalities

On my website, there is a section that requires drag and drop functionality in HTML5. I want to inform users on the homepage if their browser supports this feature. Despite attempting to use Modernizr, I have not been successful. I generated a custom file ...

Creating a Sticky Header and Footer with Responsive Design: Ensuring Content Div Expansion between Them

Greetings. I am working on creating a simple responsive HTML layout as described below: HTML: <div id="header"></div> <div id="content"></div> <div id="footer"></div> CSS: #header{ wi ...

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

Implementing nested popup windows using Bootstrap

I am facing an issue with my two-page sign-in and sign-up setup in the header of my angular2 project. On the sign-up page, I have a link that should redirect to the sign-in page when clicked, but I am struggling to make it work. Can someone provide guidanc ...

Geonames weather API experiencing issues retrieving data

Is there anyone who can assist in identifying why the geonames API is failing to retrieve data? Although it seems simple, it's not functioning as expected. For example, here is a link to the API: Below are the HTML/AJAX/PHP codes for review. Thank ...

Which is more efficient for rendering performance: using images, CSS gradients, or box shadows with borders?

I'm curious about improving website scroll and animation performance. Which option would be better for your mobile webapp or website: Using a repeating thin image or CSS3 gradient? or Utilizing a repeating image instead of box shadow with a borde ...

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...