Content within division on top of dark overlay WITHOUT transparency

I am currently working on an on-boarding design similar to Medium's, where text is centered within a box with a black overlay and a background image.

https://i.sstatic.net/dUt0I.png

However, I am facing difficulty in preventing the text inside the div with the background image from being affected by the opacity of the overlay. 

<div class="blackBackground">
    <div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
        <p class="text-inside-image">Fashion</p>
    </div>
</div>

Here is my CSS:

.blackBackground {
  background-color: black;
  z-index: -1;
}

.opacityFilter {
  opacity: 0.8;
  position: relative;

}

.margin-bottom-negsix {
  margin-bottom: -6px !important;
}


.topicImage {
    padding-bottom: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    position: relative !important;
    height:150px;
    background-color: rgba(0, 0, 0, 0.8) !important;

}

.text-inside-image {
  position: absolute;
  top: 20%;
  left: 35%;
  color: white;
  font-size: 24px;
  font-weight: 500;
  z-index: 1;
}

I have tried various solutions such as CSS - Opaque text on low opacity div? and How to keep text opacity 100 when its parent container is having opacity of 50

Despite these efforts, I have not been successful in resolving the issue.

You can view my progress on JSFiddle here: https://jsfiddle.net/RohitTigga/akz5zng7/1/

Can anyone help me understand why this is happening and provide guidance on how to fix it?

htmlcssbackgroundopacity

Answer №1

Hey there, consider updating your HTML code to this:

HTML 

<div class="my-container">  
    <h1 class="text-inside-image">Fashion</h1>
    <img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>

CSS

.my-container {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
.my-container h1 {
    padding: 50px;
    text-align: center;
    z-index: 2;
    position: relative;
    color: #fff;
} 
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.6;
}

Find an example at this link

Answer №2

Applying a transparent background color to the element was done followed by overlaying it with a background image.

If the intention is for the background image to also have transparency, opt for an image that inherently supports this feature. The PNG image file format is ideal for achieving this effect.

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

Step-by-step guide on accessing and displaying a disc file within a webix application

I am a beginner in webix development and struggling to find documentation or help for my current issue. Within my webix application, I am trying to create a button (let's call it 'View Report') that when clicked will open a file from my loc ...

javascriptjqueryhtmlwebix

Place the "Close" button outside of the div container

I am facing an issue with the login button protruding slightly outside the border of a div. Despite trying to adjust the code to align it correctly, the issue persists. .closeWindow{ float: right; margin-left: 15px; /* half the width of the close b ...

htmlcss

When double quotes are used in a string within an HTML input field, they may display as &

Using PHP, I am retrieving data from an SQL database and generating JavaScript code to create an edit button for each entry. The edit button triggers a text input field within a form. When the user clicks on the generated edit button, the text in this inpu ...

javascriptphphtmlsql

Is the CSS :not selector failing to operate as expected?

I have been trying to use the :not selector in my code, but for some reason it's not working. I can't figure out why this is happening, especially since the ul element does have the webmedia-gallery class. Any thoughts on what could be causing th ...

css

Mobile device accessing a video file twice in a row

Currently, I am in the process of developing my own DRM solution for video content. Each time an access is made to the actual video file, it goes through a verification process. For example, instead of streaming video.mp4 directly, it first passes through ...

htmlvideomobile

`Troubleshooting: Inability to chain selectors for custom styling in Next JS module`

When I chain selectors in a CSS file, the styles don't seem to apply as expected. I'm importing the styles into the component and it only applies for the main class. For example: import styles from './Home.module.css' const Home = () = ...

cssnext.js

Sending authorization codes to web pages

I have developed a user authentication system that generates an access token after successful login. The challenge I am facing is passing this token to different pages as a header parameter in order to grant access to those pages. module.exports.authen ...

htmlnode.js

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, in ...

htmlcssblur

Secure your DOM's href attribute from prying eyes

I have a display page that shows all of our reports in the following format: https://i.sstatic.net/lNzH8.png When hovering over a report, it displays the file's URL (where it is located on our server). I want to prevent users from accessing this inf ...

javascriptphpjqueryhtml

Which specific technological platform or framework would be most suitable for constructing a similar project?

https://i.stack.imgur.com/LL1g9.png Looking at the image provided, my goal is to allow users to navigate between pages on the Home page without having to refresh the entire browser window. I believe this can be achieved using Ajax technology, am I correct ...

javascripthtmlcssajaxfrontend

How to modify the value of an attribute in a HTML element

I have a photo that I am using with an Image Map in my HTML document Recently, I incorporated some Bootstrap elements to my page, but to make a long story short, I am looking to dynamically change the coordinates of the map areas based on the position of ...

javascriptjqueryhtml

Utilize a button within a form to add additional variables to a URL that already contains variables from a separate form

I operate a website that features a search bar and checkboxes for adding variables to the URL: term = "test" variable1=1 url/search?term=test&variable1=1 After completing the initial search, I have additional forms on the left side of the page with m ...

javascriptjqueryhtmlformscheckbox

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

javascriptjquerycss

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

Bootstrap resource failed to load

I successfully connected the most recent version of bootstrap.min.css to my webpage using <link rel="stylesheet" href="assets/css/bootstrap.min.css">. Initially, everything was running smoothly. However, I now encountered an issue where my browser is ...

htmlcsstwitter-bootstrapbrowserlocal

Tips on triggering an AJAX call to load additional content when a user reaches the bottom of the page for the first time

My goal is to dynamically append an HTML file to a div element when the user reaches the bottom of the page. However, I have encountered an issue where the script appends the content multiple times after refreshing the page. It seems like the Boolean varia ...

javascriptjqueryhtmlajax

What is the best way to navigate back to the top of the page once a link has been clicked?

One issue I'm facing is that whenever I click on a link in NextJS, it directs me to the middle of the page: <Link href={`/products/${id}`} key={id}> <a> {/* other components */} </a> </Link> I believe the problem l ...

javascriptcssreactjsnext.js

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

javascripthtmliframesharepointmodal-dialog

Displaying divs depending on dropdown selection - Troubleshooting script issue

When I try to display certain divs based on dropdown selection using the script below, it works fine on a simple page. However, when I implement it on my current development page, it completely messes up the layout, turning everything black and adding stra ...

javascriptjqueryhtml

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

javascripthtmlcssbootstrap-5