Conceal a hidden element underneath a see-through layer featuring an adaptable background image spanning the entire webpage

Is there a way to create a "title bar" with text only, that stays fixed on top and the content below scrolls underneath it? Additionally, is it possible to make the title bar transparent for the background but not for the content below it?

Also, can the same background be applied to the title bar in order to make it non-transparent while keeping the background image responsive? Check out an example here.

CSS:

.top_menu { position:fixed; height:100px; margin-left:5%; width:95%; z-index:2; }
.content { position:relative; left:180px; top:100px; z-index:2; }
#background_image { position:fixed; top:0; left:0; bottom:0; right:0; background:#D3AA69 url("/img/background.gif") repeat-x; background-size:auto 100%; }

HTML

<body>
<div class="top_menu"></div> <!--(the DIV I want to stay on top)-->
<div class="content"></div> <!--(the DIV I want to hide when scrolling)-->
<div id="background_image"></div>
css

Answer №1

It appears that achieving this with CSS alone may not be possible.
Although, by using a simple JavaScript function, adjusting the height of the content DIV can easily be accomplished:

function setDivHeight() {
var newHeight = $(window).height();     
newHeight = newHeight - 100;
newHeight = newHeight + "px";
document.getElementById("contentContainer").style.height = newHeight; }

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

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

Prevent event propagation in jQuery by using .stopPropagation() when hovering over a

When trying to implement event.stopPropagation() in a specific scenario, I encountered an issue with a blinking background image on my submenu. To address this, I added a pseudo-element (background:green) to the parent element by toggling a new class using ...

javascriptjquerycssstoppropagation

Changing the text color of an active button in Bootstrap

Hello everyone, I've been struggling to find a solution to my issue and I could really use some help. The problem I'm facing is changing the text color of the active button in Bootstrap. Specifically, after clicking on a button, I want it to tra ...

htmlcsstwitter-bootstrap

Automatically Scrolling Div According to its Content

Struggling to figure out how to make a parent div automatically scroll based on its child's content. I have a menu that expands when clicked and needs to scroll if the height of the child exceeds that of the parent. This is the HTML for the menu wra ...

htmlcssscrolloverflow

Safari encounters issues with Flexbox child elements that exceed their assigned height dimensions

Encountering a peculiar Flexbox height dilemma specific to Safari. Interestingly, in Chrome, the center div perfectly fills the 100% height of the body div. Contrastingly, on Safari, the center div extends beyond the 100% height of its container; seeming ...

htmlcsssafariflexbox

Creating a large and spacious modal in Angular using ngx-bootstrap

I need help with resizing the ngx-modal to cover a large area of the screen. Currently, I am trying to make it so that when something is clicked, the modal should overlay an 80% width grid on a full desktop screen. Despite my attempts at using .modal-xl an ...

cssangularbootstrap-modalngx-bootstrap

What steps should I take to correct the color selection of a button that has been pressed down

Here is the code snippet that I am currently working with: HTTP: <label class="instructions" for="hidden_x"> Insert X: </label> <button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById(' ...

javascripthtmlcss

What is the process for aligning a Component to the right within the Navbar in an AppLayout

In my project, the MainView class is an extension of an AppLayout. I am attempting to populate the Navbar with a logo on the left and the user ID on the right. Despite my efforts, both components keep aligning to the left side. Desired Navbar layout: ...

javahtmlcssvaadinvaadin14

The label element in a CSS form is not displaying correctly

After clicking submit on the form located at this link: I am experiencing an issue where the validation messages are not displaying as intended. I would like them to appear next to the input elements, inline with the form. I suspect that there may be a p ...

css

problem when trying to establish the minimum height for a div element prior to the website being fully loaded, considering the

Having trouble with a CSS issue that seems simple but I can't find a solution for. I have a main div with a min-height set to a certain value, specified in %. Since there is no outer div, the min-height won't display if it's given in px. I ...

javascriptjqueryhtmlcss

Tips for maintaining the footer at the bottom of the page regardless of the screen size

In my current project, I am dealing with several web pages. For each page, I have arranged three div tags: Header Body (content) Footer The issue arises when it comes to the body div tag, which houses the main content of a page such as forms and descrip ...

htmlcss

Modify the CSS of the gauge element without causing any issues

I am facing an issue while trying to resize this gauge element. Whenever I attempt to modify the container class to make it smaller, the entire gauge ends up distorting. Changing the position to relative seems to cause glitches at the edge of the gauge. An ...

cssvuejs2

What could be causing the flexbox code to not take effect and the text to refuse wrapping?

I've been utilizing flexbox to style my content, and it worked seamlessly on the first three divs. However, when I attempted to apply the same styling to the fourth one, it didn't quite work out as planned. Despite trying options like flex-wrap t ...

htmlcssflexbox

When you have a target element that is deeply nested, consider using a 50% height relative to

There is some confusion surrounding the issue below: <div class="container"> <div class="row"> <div class="group"> <a> <div class="col-lg-3 full-h"></div> </a> <a> < ...

htmlcssheight

I am interested in updating the color of the navigation bar displayed on this website

I am having some trouble with manipulating the appearance of - Specifically, I'm struggling to change the color of the black bar at the top to blue. I have scoured the CSS files and examined the HTML, but I can't seem to locate the relevant code ...

htmlcsstwitter-bootstrap

Utilizing CSS to style text on a menu by applying a specific class to an unordered list element

Is there a method to use CSS to invoke a div id function that will highlight text when the mouse hovers over it? <ul class="sub-menu"> <li id="menu-item-1721" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1721">< ...

htmlcss

instructions for creating a hover effect where one div vanishes when hovering over another div

Is there a way to make the line visible when hovering over my circular div? #line { display: none } <div id='circle'> <div id= 'line'> ...

javascripthtmlcss

How to create a WordPress sidebar that remains fixed while scrolling

I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...

phphtmlcsswordpress

Angular causing WKWebview to freeze

Situation Our Angular+Bootstrap app is functioning smoothly in Desktop on all operating systems, as well as Android and iPhone devices. There are no visible JavaScript errors or CSS warnings. Dilemma However, an issue arises intermittently while using t ...

javascriptioscssangularjswkwebview

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

htmlcssparagraph