Navigating through the webpage using CSS gradient backdrop

Check out this page. Under the "Pedidos" section, there is a scrolling area with a gradient background. The issue I'm facing is that I want the background to continue scrolling and repeating as I scroll down the page, but it remains fixed. I tried the same code on a simple page and it worked fine, so why isn't it working here? Below is the relevant CSS styling for that section:

.pedidos #list {
  width: 100%;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  overflow-y: overlay;
  max-height: calc(100vh - 405px - 10px);
  background-image: repeating-linear-gradient(180deg, #e1e1e1, #e1e1e1 35px, #cdcdcd 35px, #cdcdcd 70px);
  background-repeat: repeat;
}

UPDATE

Here is the current code snippet for the area (the list item is added for spacing demonstration):

<ul id="list">
  <li style="height: 1000px; background-color: transparent;">a</li>
</ul>
htmlcss

Answer №1

This simple solution can resolve the issue at hand. Using Background-attachment:fixed will keep the background attached to the viewport.

An alternative approach is to enable the background to scroll along with the page content by utilizing background-attachment:scroll

.pedidos #list {
  width: 100%;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  overflow-y: overlay;
  max-height: calc(100vh - 405px - 10px);
  background-image: repeating-linear-gradient(180deg, #e1e1e1, #e1e1e1 35px, #cdcdcd 35px, #cdcdcd 70px);
  background-repeat: repeat;
  background-attachment:scroll;
}

Answer №2

Recently, I encountered a similar issue when designing a lined paper style. To ensure that the gradient background scrolls with the text, it's necessary to set the background-attachment property to local.

Here is the previous behavior where the lines stay fixed:

document.addEventListener('DOMContentLoaded', function() {
  const paper = document.getElementsByClassName('paper')[0];
  const d = document.createElement('div');
  d.innerHTML = "This is a lined paper without scrolling gradient background. ".repeat(150)
  paper.appendChild(d);
});
* {
  padding: 0;
  margin: 0;
}

.main {
  height: 90vh;
  overflow: hidden;
}

.paper {
  min-height: 100px;
  height: 100%;
  padding: 10px 15px;
  text-align: justify;
  overflow-y: overlay;
  margin-bottom: 10px;
  font-family: 'Indie Flower', cursive;
  font-size: 18px;
  line-height: 26px;
  background-color: #fafdff;
  background-image: repeating-linear-gradient(white, white 24px, #a0b0f0 25px, #a0b0f0 26px);
  background-position-y: 5px;
  background-attachment: scroll;
}
<div class="main">
  <div class="paper">
  </div>
</div>

And here is the updated version where the lines move along with the text:

document.addEventListener('DOMContentLoaded', function() {
  const paper = document.getElementsByClassName('paper')[0];
  const d = document.createElement('div');
  d.innerHTML = "This is a lined paper with scrolling gradient background. ".repeat(150)
  paper.appendChild(d);
});
* {
  padding: 0;
  margin: 0;
}

.main {
  height: 90vh;
  overflow: hidden;
}

.paper {
  min-height: 100px;
  height: 100%;
  padding: 10px 15px;
  text-align: justify;
  overflow-y: overlay;
  margin-bottom: 10px;
  font-family: 'Indie Flower', cursive;
  font-size: 18px;
  line-height: 26px;
  background-color: #fafdff;
  background-image: repeating-linear-gradient(white, white 24px, #a0b0f0 25px, #a0b0f0 26px);
  background-position-y: 5px;
  background-attachment: local;
}
<div class="main">
  <div class="paper">
  </div>
</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

In Internet Explorer 10, it is not possible to access the document.links using the link's id; it can only be accessed using the

Why does the following code work in FireFox 23.0.1 and Chrome 29, but not in IE 10? <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> function loadFile1(){ a ...

javascripthtml

Expansive Child Division with Ample Margins

I'm currently working with a nested set of divs and I need the inner div to occupy the full width without extending beyond the parent div's margins. Despite trying to use max-width:100%, it hasn't been successful so far. For this particular ...

htmlcss

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Tips on adjusting a JavaScript animation function

I'm currently working on adjusting the animation function within the "popup" class that controls the gallery section of a website. When the page loads, an image and background start expanding from zero scale in the center to 100 VIEWPORT HEIGHT (VH) a ...

javascripthtmlcss

Utilizing Bootstrap grid system to create varied column widths for content alignment

Looking to create a page with multiple entries that include text descriptions and associated icons of varying sizes, aligned neatly. (For simplicity, using letters "i" and "w" as placeholders for icons.) For wider screens, the setup should feature a grid ...

csscss-gridbootstrap-5

What could be causing the absence of a background image in CSS?

When I try to view my local desktop file, the CSS background image isn't showing up. Here's the code I'm using: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" text="type/css" href="dis ...

htmlcss

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...

phpjavascripthtmlajax

What is the best way to eliminate the white border from my website's code?

If you'd like to see the code in action, check out my JSFiddle html, body { height: 100%; } #background { height: 100%; background: url(http://phosproject.com/wp-content/themes/phos_theme/images/7.jpg); no-repeat center cente ...

htmlcss

Modify the displayed image when hovering using inline coding techniques

I am having trouble changing an image on hover. I have attempted various methods without success. However, I need to stick with something similar to this code. Please let me know if there are any issues with this code. Thank you in advance. Code < ...

jqueryhtmlcss

Make changes to a characteristic of the pseudo-class ":host"

Within an Angular project, I am attempting to modify the border-top attribute of the pseudo-class :host associated with the component called p-table-row. This specific component is part of a library created by Porsche and can't be directly edited. Vie ...

cssangularcss-selectorsshadow-dom

Are there varying levels of efficiency when retrieving elements by ID versus by class using JavaScript/jQuery?

When it comes to JavaScript/jQuery, is there a performance disparity between locating elements by id versus by class? Is one method superior over the other? Could it be attributed to ID or Class indexes being generated in the DOM? Ultimately, does the di ...

javascriptjqueryhtml

Why does this image slider begin with blankness?

For my recent school project, I created an image slider. However, upon starting the page or reloading it, only the arrows and dots are displayed. View screenshot of the issue Below is the code snippet: // JavaScript function to control the slideshow sho ...

javascripthtmlcssimageslider

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

javascripthtmlangularjsiframe

What is the process for connecting controls to Canvas sprites?

Any input is EXTREMELY helpful! To put it shortly, I'm in need of assistance with utilizing HTML5/CSS3 buttons to manage sprite animations on my canvas. These buttons are responsible for controlling the direction and speed of the sprites independentl ...

javascripthtmlanimationcanvashtml5-canvas

Angular 4 Form remains valid even when an incorrect value is entered

Within my Angular 4 project, I encounter the issue of controlling input fields in multiple forms. Specifically, I need a mechanism to disable the save button if the input value is incorrect. For example, when I require an input field to only accept positi ...

htmlangularuser-input

Launching event handlers and applying CSS classes within a single scenario

How can I toggle the visibility of a button based on form field validation in JavaScript? I want to show or hide the button when the .confirm button is clicked, and if the form is valid, add a checkmark to the body element through event listener. The issu ...

javascriptcsseventsconditional-statements

Learn the process of retrieving a file from server.js and showcasing it on an HTML page

I am currently developing a YouTube video downloader using express, HTML, and JavaScript, with plans to transition to Vue.js in the future. Here is a snippet of my code: Index.html <!DOCTYPE html> <html lang="en"> <head> & ...

javascripthtmlnode.jsvue.jsexpress

What is the proper jQuery traversal method to display a single templated element?

Utilizing handlebars as the view engine for node.js, the subsequent html content is dynamically produced and repeated: http://jsfiddle.net/4Q5PE/ <div class="btnsContainer"> <div class="btn-group" data-toggle="buttons"> <label cla ...

javascriptjqueryhtmlcsstraversal

Ways to eliminate the white background placed behind the arrow on my bootstrap carousel

I've been attempting to create a video carousel using Bootstrap 5, and one issue I'm encountering is the appearance of a white background when hovering over the arrow. Normally, it shouldn't display a background, but for some reason, it does ...

htmlcsstwitter-bootstrapbootstrap-5bootstrap-carousel

PHP and special characters from other languages

Struggling with writing non-English characters to a file (.txt) using PHP. Here's the code snippet: $str = "â€êþÿûîœøîô‘ë’ðüïlæ߀¿×÷¡ï"; $str = htmlentities($str, ENT_QUOTES, mb_detect_encoding($str)); $str = htmlspecialc ...

phphtmlfileencodingentities