Question 237953 in Html Question posted in
Some basic documentation can be found here.

Html – website with image background : content scrolling under transparent header

I’m using a background image on my website, my header is i position fixed with a transparent background.
I want the main content to be hidden when scrolling under the header.
I managed to achieve this using -webkit-mask-image property, but it’s affecting the whole structure of the page (the wrapper has to be 100vh height with overflow-y scroll…). I was wondering if there was a simplier solution I could use that would not affect the structure, since I’m using some other functionalities (scroll to ID for instance).

here’s a codepen : https://codepen.io/mmdwc/pen/Yzdyaqw

body {
  overflow:hidden;
  background: url("https://keops-event.com/wp-content/uploads/2021/02/06-keops-calbar-bar-cover-2210x1245.jpg") center center no-repeat;
  color:white;
  -webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}

header {
  position: fixed;
top: 0px;
width: 100%;
left: 0px;
padding: 20px 20px 0px 20px;
z-index: 102;
height: 50px;
}

#wrapper {
width: 100%;
  height: 100vh;
  padding: 20px;
  padding-top: 50px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50px, rgb(0, 0, 0) 60px);
  overflow-y: scroll;
  font-size:80px;
}
<html>
  <body>
<header>
  THIS IS THE HEADER
</header>

<div id="wrapper">

<div id="content-ajax">
Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

  </div>

</div>
    
  </body>
</html>

any suggestions ?

Tags:

3

Answers


  1. 0

    I think the way to do it is by clipping the content instead of masking the wrapper. For a detailed explanation about the differences, you should take a look at https://css-tricks.com/clipping-masking-css/.

    Login or Signup to reply.
  2. 0

    There is a background-attachment property which does what you need.
    Set it to ‘fixed’, then set background: inherit to your header and here you are (I’m using it in background shorthand):

    body {
  ooverflow: hidden;
  background: url("https://keops-event.com/wp-content/uploads/2021/02/06-keops-calbar-bar-cover-2210x1245.jpg")
  no-repeat
  fixed /* HERE */
  center center / cover;
  
  color: white;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 102;
  width: 100%;
  height: 50px;
  padding: 20px 20px 0px;
  background:inherit
}

#content-ajax {
  padding:50px 20px 20px;
  font-size: 80px;
}
    <header>
  THIS IS THE HEADER
</header>


<div id="content-ajax">
  Altera sententia est, quae definit amicitiam paribus officiis ac voluntatibus. Hoc quidem est nimis exigue et exiliter ad calculos vocare amicitiam, ut par sit ratio acceptorum et datorum. Divitior mihi et affluentior videtur esse vera amicitia nec observare
  restricte, ne plus reddat quam acceperit; neque enim verendum est, ne quid excidat, aut ne quid in terram defluat, aut ne plus aequo quid in amicitiam congeratur.

</div>
    Login or Signup to reply.
  3. 0

    you can set the same image as a background for the header, something like this
    https://codepen.io/mmladenov/pen/jOXbKeL

    header {
  position: fixed;
  top: 0px;
  width: 100%;
  left: 0px;
  padding: 20px 20px 0px 20px;
  z-index: 102;
  height: 50px;
  background: url("https://keops-event.com/wp-content/uploads/2021/02/06-keops-calbar-bar-cover-2210x1245.jpg") 0 0 no-repeat;
  background-size: cover;
}

    It’s a bit of a fine tuning in this case, but you will get the idea 😉

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search