Tips for concealing scrolled material beneath a stationary see-through banner

After searching through various questions on the topic, I have not found a working solution.

My goal is to hide the body content beneath a transparent fixed header when scrolled. Take a look at my current setup here: https://jsfiddle.net/nukuf23L/

If possible, I would like to achieve this using pure CSS, but I am open to JS/JQuery solutions as well.

Here is the structure of the HTML:

<div id="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

This is the accompanying CSS:

body {
margin: 0;
padding: 0;
background: url(http://etc.usf.edu/clipart/80100/80154/80154_grid_20_20_lg.gif) no-repeat center center fixed;
}

#header {
position: fixed;
z-index: 10;
background-color: rgba(0, 0, 0, .7);
width: 100%;
height: 70px;
}

#main {
background-color: rgba(255, 0, 0, .7);
height: 1000px;
position: relative;
top: 70px;
}

Answer №1

To achieve the desired effect of a color overlay on your background image, it is recommended to apply the grid image to both the header and body sections.

In order to create the color overlay on the grid image, you will need to add a second background-image using a linear gradient.

Live Demo

body {
  margin: 0;
  padding: 0;
  background: url(http://example.com/grid.jpg) no-repeat center center fixed;
}
#header {
  position: fixed;
  z-index: 10;
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)),      
    url(http://example.com/grid.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  height: 70px;
}
#main {
  background-color: rgba(255, 0, 0, .7);
  height: 1000px;
  position: relative;
  top: 70px;
}
<div id="header"></div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit...</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

Fade In and Contemplate CSS, Not Effective

Hey there! I'm trying to achieve a similar effect like the one shown in http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. The issue is that the reflection of the image isn't displaying as it should. I've tried inspecting the ele ...

When aligning to the right, input box does not wrap

Is there a way to prevent an input box from displaying on a lower line than the menu when using CSS to create a one line menu floated to the right? This is the CSS code being used: <style type="text/css"> #nav { margin:0; padding:0; lis ...

Adjusting the size of content with CSS

I've been attempting to get an image to cover the entire screen on a device using CSS, but so far I haven't had any success. The image is within an :after pseudo element and content tag. Since it needs to be laid over the HTML, I can't use t ...

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

Could someone help me figure out how to implement HTML, CSS, and JavaScript design in Visual Studio 2022 while utilizing ASP.NET controls for coding purposes? I am encountering difficulties in starting my work on a website project. Any assistance would be ...

VS Code warning about unused CSS selectors in SvelteKit

Is there a way to get rid of the Unused CSS selector warning in VS Code? I keep getting this warning in all files where I use <style lang="scss">. While I'm aware that I don't use the .btn class in some components, I still want it ...

Sequence of loading unique CSS skin for MediaWiki

Running a MediaWiki site with a personalized skin, I've noticed that the CSS code from my custom skin is being overshadowed by the default MediaWiki CSS. Is there a way to modify the sequence in which the CSS code is loaded? ...

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

Moving from CSS to SCSS: Incorporating CSS files from npm packages - A Step-by-Step Guide

I am new to SASS and currently in the process of converting my existing project's CSS files to SCSS. I know that simply changing the extension to .scss will work for my custom files, but I'm not sure how to handle the dependency style files. I ty ...

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

Firefox is having trouble loading SVG files

For some reason, the SVG image is loading on all browsers except for Firefox. I checked the DOM but couldn't find the code. Just to clarify, I am serving the page from Tomcat 9.0.34 <kendo-grid grid-options="gridOptions"> <img src= ...

Problem encountered with modal and JavaScript: Uncaught TypeError: Unable to retrieve the property 'classList' of null

Trying to implement a modal feature for the first time but encountering an error when clicking the button. Unsure if I'm following the correct procedure as a JS beginner. Any assistance would be appreciated. ERROR { "message": "Uncaugh ...

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

Interactive sidebar scrolling feature linked with the main content area

I am working with a layout that uses flexboxes for structure. Both the fixed sidebar and main container have scroll functionality. However, I have encountered an issue where scrolling in the sidebar causes the scroll in the main container to activate whe ...

What could be causing the excessive vertical spacing in an HTML list on Chrome: PHP output or CSS styling?

I'm having difficulty understanding why there is a significant vertical offset (around 170px) between one <li> element and the next. This issue seems to only occur in Chrome and not in Firefox, specifically within <li> elements when PHP co ...

Transform your table into an ASCII-art masterpiece using CSS styling techniques

My vision is to style a table "ASCII art" using CSS, like the example below: +------+---------+----+ | Jill | Smith | 50 | +------+---------+----+ | Eve | Jackson | 94 | +------+---------+----+ | John | Doe | 80 | +------+---------+----+ <ta ...

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

The Angular UI Bootstrap Datepicker fails to appear on top of the Bootstrap Modal

I'm currently working on an Angular app that utilizes UI Bootstrap. Within my app, I have a modal containing a Datepicker at the bottom. However, I've encountered an issue where the Datepicker remains confined within the modal when expanded. I at ...

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...