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

Adjusting ThreeJS Canvas to Utilize Entire Space

Here is a simple example I created for demonstration: http://jsfiddle.net/8nbpehj3/37/ <html> <body> <div class='wrapper'> <div class='nav'> <div class='button'>Button</div ...

cssthree.js

Creating a vertical navigation menu and displaying its submenu on corresponding pages in a horizontal layout

I'm struggling to design a navigation layout for my website where I want to display the main menu items like this: Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 and have their respective sub-menus displayed horizontally on their main menu pages like this: ...

htmlcssmenu

Is there a way to allow only the block code to shift while keeping the other span tags stationary?

Is it possible to change the text without affecting other span tags in the code? I want to make sure only this specific text is updated. How can I achieve that? var para_values = [ { content: "BRAND " }, { content: "MISSION" } ]; functi ...

javascripthtmlcss

Increase scrolling speed? - Background abruptly moves after scroll

I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background p ...

javascriptjquerycss

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

How to customize the button color in a Next.js application

Help Needed: Issue with Changing Default Button Color in Next.JS Web Application. The button text color appears as grey on Desktop Google Chrome, but shows up as blue on Mobile Chrome browser. I want to unify the color to be grey on both platforms. Custo ...

javascriptcssbuttonnext.js

Troubleshooting the fluid container problem in Bootstrap 3

I am currently working on a website using Bootstrap 3 framework. I have a specific section where I need to have two fluid containers placed side by side, each with different background colors. One of these containers should also include a background image ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Printed pages featuring neatly organized two-column div layout

Forgive me if this question has already been asked, but I need some guidance: I am designing reports using HTML and CSS which are then converted into PDF format. The report requires a two-column layout on most pages, so I am using: <div class="two_col ...

htmlcsspdfcss-multicolumn-layout

Move the container all the way to the left

On my page, I have a grey section with the heading 'Start Analysis' that needs to be shifted to the left along with all its contents. How can this be achieved? The HTML code for the section is as follows: <!DOCTYPE html> <html lang="en ...

htmlcsstwitter-bootstrap-3

What is the correct way to utilize CSS for setting a responsive background image for an element?

When I set the background-image for an <a>, it always requires specifying the width and height in the stylesheet file. This causes the URL image to not be responsive. I've tried solutions such as using background-size: cover; and background-colo ...

jqueryhtmlcsstwitter-bootstrap

Troubleshooting: How can I ensure my custom scrollbar updates when jQuery niceselect expands?

I am currently utilizing the jquery plugins mCustomScrollbar and niceselect. However, I have encountered an issue when expanding the niceselect dropdown by clicking on it - the mCustomScrollbar does not update accordingly. I suspect this is due to the abso ...

javascriptjqueryhtmlcss

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

javascripthtmljquerycss

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

csscss-grid

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Creating a personalized audio player using HTML

I have created a design for an audio player that I would like to implement using the HTML audio player element. When I tried <audio></audio>, it just displayed the default player: Is there a way to customize the style of the player to match t ...

javascriptcsshtmlhtml5-audio

Organize elements with precision using html and css properties

I am struggling to get the buttons on the card to align properly. I have set a minimum height to ensure they are consistent in size regardless of content, but the alignment of the buttons is off. Take a look at the photo attached for reference - I want the ...

htmlcssbootstrap-5

Issue with mix-blend-mode causing text to not show up on top of the gradient

I am struggling to find a way to make text easily readable over my gradient background. Despite trying to use MUI's Typography or a simple <p>, the contrast isn't great as the text appears in black. After some research, I discovered that I ...

cssmaterial-ui

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

javascriptjqueryhtmlcss

What is the best way to create a border for the active class nav-item in Bootstrap 4?

I am facing an issue with changing styles in the nav-item. I have created a separate style sheet and added the necessary code to make the changes. Surprisingly, the changes are reflecting well in Internet Explorer but not in Firefox. Can anyone guide me on ...

cssbootstrap-4

Adjustable Size with jQuery UI - Resizing Multiple Divs Causes Movement of Adjacent Divs

I've been experimenting with a webpage that consists of a div element containing multiple nested divs and jQuery UI resizable functionality. Essentially, it's a dashboard comprised of individual widgets. My goal is to resize each widget independe ...

jquerycssjquery-uihtml