Is there a method to increase the vertical length of a ::before pseudo-element within a fixed container?

One issue I'm facing is that the ::before selector doesn't extend vertically in a fixed element.

Does anyone know of a way to ensure the background fills the entire height? Currently, when a user scrolls, the ::before elemeent stops once the user has scrolled outside the viewport.

I am seeking a solution that doesn't involve javascript.

Thank you for any help provided.

Note: I am using SASS, so answers can be in SCSS or plain CSS.

View full code here: https://jsfiddle.net/u7fvb2nq/

Snippet:

.outer
  position: fixed
  &::before
    content: ''
    position: absolute
    left: 0
    top: 0
    bottom: 0
    right: 0
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.3))
csssass

Answer №1

To create a fixed position for the :before pseudo element, you can use the following CSS:

.outer{
  position: fixed;
  background: url('https://images.unsplash.com/photo-1473830394358-91588751b241?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60');
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}
.outer:before{
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.5) , rgba(255, 255, 255, 0.4));
} 
    
.outer p{
    color: #fff;
    font-family: sans-serif;
    max-width: 400px;
    font-size: 2rem;
}
<div class="outer">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu dignissim felis, sit amet ultricies justo. Praesent consequat at nulla nec eleifend. Sed convallis, metus non pellentesque elementum, nunc arcu condimentum leo, sit amet pellentesque turpis augue ac sapien. Phasellus facilisis lacinia mauris at consectetur. Morbi sapien augue, condimentum vel erat vitae, semper rutrum erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum porttitor pharetra faucibus. Donec lobortis massa id dui porta aliquam. Integer eu velit lacinia, cursus libero in, vulputate ligula. Ut ut vestibulum nunc. Nulla facilisi. In turpis augue, luctus pellentesque nibh vel, ullamcorper feugiat orci. Mauris ut metus nec mauris venenatis viverra ut eu mi. Integer quis sem sed tortor dignissim lobortis et at dui. Proin pretium id lectus non semper.dfsdf</p>
</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

Exploring Java Programming with HTMLEditorKit

Here is my source code: I am trying to change the font color using only CSS. This is how I am inserting HTML: <span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span> When using ...

javahtmlcss

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

javascriptcsssortinganimationfiltering

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

What is the best way to create a hover effect for this text?

When I hover over the image div, the text section will smoothly appear from the bottom. You can see an example of what I want here. Below, you'll find the HTML and CSS code I've implemented for this effect. ============================== ...

htmlcss

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

css

CSS3 rotation animation - begins to rotate and then halts at a specific angle

I attempted to develop a function that initiates a spin, replaces an image, and then stops the spin. However, when I remove the spin class, it jerks abruptly. How can I halt the spinning smoothly at a specific frame? setTimeout(function() { $('. ...

jqueryhtmlcsscss-animations

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

htmlcssiosangularangular-material

Is there a method to incorporate absolute paths in SCSS while working with Vite?

Currently, I am experimenting with React + Vite as webpack seems to be sluggish for me. My goal is to create a project starter, but I am facing difficulties in getting SCSS files to use absolute paths. Despite including vite-tsconfig-paths in my vite.confi ...

reactjstypescriptsassabsolutevite

Enhance Material UI BottomNavigationAction by adding a pseudo-element

Trying to enhance a selected item with an additional UI element using a pseudo-element. Specifically, looking to add a line above the menu item. https://i.stack.imgur.com/MZnmw.png The code I've implemented is not displaying the desired line: const ...

cssreactjsmaterial-uipseudo-element

Attempting to create a slider utilizing jQuery

I'm currently working on creating a slider using jquery. I have downloaded the cycle plugin for the slider and included it in my file. The slider consists of 7 pictures. Below is the code I am using, can someone please help me identify any issues? &l ...

javascriptjqueryhtmlcss

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

I am currently facing a challenge with Bootstrap, as I am trying to design a webpage for small devices using a 1:4:1 format, but I am struggling to get it right

column 1 and column 3(left and right cols) have successfully passed the test case, but not column 2 (the middle one) that I have commented on in the code. Please help. Thank you. The problem has certain conditions that would have been easier to understa ...

htmlcssbootstrap-4

Flexbox properties are being ignored by input fields

Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as ...

htmlcss

How to create centered striped backgrounds in CSS

Attempting to achieve a background similar to the one shown Can this be accomplished using CSS? ...

css

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

jqueryhtmlcss

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

javascriptcsscursor

Unable to insert menu links into the container

Currently, I have a logo and image slider placed next to each other in a container. However, I am facing difficulty in adding 3 menu links horizontally under the logo. Every time I try to do so, the links end up going above the image slider, causing it to ...

htmlcssimagehyperlinkslider

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

jqueryhtmlcssnavigationraphael

Utilizing grease/tampermonkey (or any other browser extension) to filter out specific characters within webpage elements

Forgive me if my language is not accurate, as I am still learning about programming. The forum that I visit has cluttered the page with unnecessary and glitchy images and text for a promotion. This has made the forum difficult to navigate. I was successful ...

javascriptcss