Troubleshooting: CSS background opacity issue unresolved

I am having trouble getting a parent div to fill the screen with a transparent background. The code I'm using only results in a solid color background for the parent div.

Here is the code snippet I have been working with:

.outer {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  background-color: white;
  padding: 20px;
}
<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

htmlcss

Answer №1

Using 50% opaque white on top of 100% opaque white creates an issue with visibility. The contrast between the two is too low for the content to stand out.

In addition, your body element has a computed height of 0, causing the .outer element to also have a height of 0 due to it being set at 100%. This results in invisible content within these elements.

html, body { height: 100%; }
body { background-color: #f0f0f0; }
.outer {
  position: relative;
  z-index: 1;
  background-color: rgba(200, 0, 0, 0.5);
  height: 100%;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  
  padding: 20px;
}
<div class="outer">
  <div class="inner">
    <h5>Search</h5>
  </div>
</div>

Answer №2

It is recommended to utilize the vh (viewport height) unit over 100% height in CSS. When setting a height of 100%, it will take up the entire height of its parent element, which in this case is the body with a height of 0px.

.outer {
  position: relative;
  z-index: 1;
  background-color: rgb(255, 255, 255, 0.5);
  height: 100vh;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  background-color: white;
  padding: 20px;
}
<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

Answer №3

When the child has a solid background and the .outer div has no height due to its absolute position, the parent div's opacity won't be achieved.

To better understand how this works, try reversing the backgrounds and setting the position relative as shown below:

Note: Even when both elements have position:absolute, it can still make sense.

.outer {
  position: relative;
  background-color: red;
  z-index: 1;
  height: 100%;
}
.inner {
  position: relative;
  width: 100%;
  top: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}
<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

Answer №4

It has been noted by others that using a div with a white background may not be effective when overlapping another white element.

Even if the color of .outer is changed to grey (as demonstrated in my example), it still does not completely fill the height of the screen.

Rather than employing height: 100%, you can utilize height: 100vh to occupy the entire screen. More information on vh (Viewport-percentage) can be found in this helpful article.

Below is an example of how this would work:

.outer {
  position: relative;
  z-index: 1;
  background: rgba(0, 0, 0, .5);
  height: 100vh;
}
.inner {
  position: absolute;
  width: 100%;
  top: 50px;
  background-color: white;
  padding: 20px;
}
<div class="outer">
  <div class="inner">

    <h5>Search</h5>

  </div>

</div>

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

Can a JavaScript function be used with images to operate across multiple elements?

How can I make a function work on multiple elements? let image = document.getElementById("opacityLink"); image.onmouseover = function() { image.style = "opacity:0.9"; }; image.onmouseout = function() { image.style = "opacity:1"; }; <div class=" ...

javascripthtmlcssimage

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Performing Jquery functions on several elements at once

Looking at the code snippet below, there are two buttons and an input in each container. The input calculates and adds up the number of clicks on the 2 buttons within the same container. However, it currently only works for the first container. How can thi ...

javascriptjqueryhtml

Tips for creating a consistent header and footer across an HTML CSS web application

My previous projects involved using ASP.NET MVC and utilizing @Html.Partial("_header") to incorporate common static HTML across different pages. However, my current project is a pure HTML CSS and JS web app with no server-side technology. The la ...

javascriptjqueryhtmlcssasp.net-mvc-4

Conceal User Interface Angular Tabulation

I'm working on setting up UI Bootstrap tabs, and for reference you can find the plunker here. My goal is to hide the tabs since I will be utilizing a button to switch between them. Despite adding the following CSS class to my file, the styling is not ...

cssangularjsangular-ui-bootstrapangular-ui-tabset

Looking for a way to implement jQuery tabs with restrictions that only allow one tab to be active at a time while using an

In my database table, there are 4 different statuses stored in the status column - 1, 2, 3, and 4. I am looking to implement jQuery tabs or Javascript tabs with tab names as Tab A, Tab B, Tab C, and Tab D. Depending on the status retrieved from the contro ...

javascriptc#htmljqueryasp.net-mvc

The JSX function seems to be malfunctioning, as the function part is not displaying on the webpage as intended

This code snippet is a part of a React component in a project. I have imported a CSS file for styling and have already integrated Material UI. However, the function for the new article is not displaying on the webpage as expected. import "./Widgets. ...

javascripthtmlcssreactjsmaterial-ui

Embedding Google+ Sharing in an iframe

I'm currently working on a web application that needs to be compatible with PC, tablets, and mobile phones. I'm interested in integrating Google+ Sharing into the app. However, it appears that when using the url , there are issues with blocking ...

javascripthtmlcssiframegoogle-plus

Using only python, launch a local html file on localhost

Currently, I am executing a code on a remote server that periodically creates an "status" HTML file (similar to TensorBoard) and saves it in a directory on the server. To check the status, I download this HTML file whenever needed. However, if I could use ...

pythonhtmlserverxampplocalhost

Extract attributes from a string of HTML containing name-value pairs

Here is a sample string that I need to work with '<img id="1" data-name="test" src="img_01.jpg" />' My goal is to extract the attribute name and value pairs from the string, create the element, and apply these attributes. I have come up ...

javascripthtmlcss

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

I am having trouble getting this to display on a single line, no matter what I try. While there may be simpler ways to achieve this without using flexbox, I am eager to learn how to do it using flexbox properties. My desired outcome is to have the first u ...

htmlcssflexbox

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Issue encountered: Unable to locate the file "SignInScreen" within the directory "./src/screens/authScreens" as referenced in the file "App.js"

App.js: import { StyleSheet, Text, View, StatusBar } from "react-native"; import { colors, parameters } from "./src/global/styles"; import SignInScreen from "./src/screens/authScreens/SignInScreen"; export default function A ...

javascripthtmlreactjsreact-nativefrontend

Tips for hiding website content on larger screens

Is there a way to hide website content on screen sizes over 1600px and display only a message image instead? ...

phphtmlcss

Connecting a href link to a TAB

Check out this useful CODE example I am using. I have a webpage with links that have href attributes. Now, I want to link these pages to another page and have them automatically open a specific tab when clicked. Is this possible? Here are the links on th ...

javascriptphpjqueryhtml

What is the best way to incorporate a YouTube video into my HTML webpage?

Looking to add some YouTube links to my webpage - I'm a complete newbie and clueless about formats and embedding. Can someone guide me on what to use and how to insert it into my HTML code? Appreciate any help! ...

htmlyoutubeembedded-video

I must arrange each item in a column vertically, regardless of whether they could align horizontally

As the title suggests, I am looking for a way to stack one element under another, similar to a chat application. Currently, when the message is long, it displays correctly, but if the text fits next to each other, it aligns in that manner. I require a solu ...

cssvue.js

Customizing jquery mobile styling

I am dealing with a table where the challenge lies in aligning the text to center in the header. .info-header { font-size: small; text-align: center; } Despite setting the alignment, the row still inherits left alignment from jQuery mobile. Seeking ...

htmlcssjquery-mobile

Eliminate screen flickering during initial page load

I've been developing a static website using NuxtJS where users can choose between dark mode and default CSS media query selectors. Here is the code snippet for achieving this: <template> <div class="container"> <vertical-nav /> ...

javascriptcssvue.jsdomnuxt.js

The Facebook Comments widget causes the webpage to automatically scroll to the bottom on older versions of Internet Explorer like

My webpage is quite lengthy and includes a Facebook comments widget at the bottom. However, when loading in IE7 and IE8, the page instantly jumps to the bottom due to this widget. Interestingly, removing the widget allows the page to load normally. This ...

javascripthtmlfacebookinternet-explorerloading