Dynamic header following the scroll position

I'm experiencing an issue where my background moves with the scrollbar, causing the header of the page to scroll along. I've included my code and a screenshot for reference. Any assistance would be greatly appreciated. Thank you.

Here's my code:


body.hixBodyBackground {
    overflow: scroll;
    margin: 0px;
    background: url(../images/common/header/Background_color.png);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: top center;  
    height: 100%;
    width: 100%;
    border: 0;
    background-size: contain;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../KY/images/common/header/Background_color.png', sizingMethod='scale')";
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../KY/images/common/header/Background_color.png', sizingMethod='scale')";
}

body, html{
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-y: hidden;
}

Attached is the screenshot illustrating the issue.

Screenshot without scrolling:

Screenshot while scrolling:

Answer №1

To resolve the issue, simply include the CSS property overflow:scroll. This should provide a universal fix for all browsers.

Answer №2

Opt for updating background: url(../images/common/header/Background_color.png); to background-image: url(../images/common/header/Background_color.png); instead.

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

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

Hide offcanvas menu upon clicking on anchor links

Issue arose when the offcanvas menu remained open after clicking an anchor link. To resolve this, I implemented the following code for an onclick event: function close_offcanvas() { var element1 = document.getElementById("eff_nav_toggler&q ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

Client request: receive a daily update detailing the differences between two databases

Today, a customer requested that I provide daily reports on the changes between two tables in our database. I am currently contemplating the most efficient and intelligent way to fulfill this request. Should I create a SQL procedure? Or perhaps an HTML p ...

What is the best way to insert a tagline above a form?

I'm struggling to figure out where to place a tagline above my form. I want it to be neat and clean, but haven't been successful in finding the right spot. I attempted to insert an <h2> inside the form, but it doesn't look good at al ...

Having Trouble Adding a CSS File to Your Django Project? Can't Seem to Get it

I am feeling exhausted trying to solve this problem and now I am in desperate need of help. I have been attempting to add a main.css file to my Django project so that I can handle the CSS myself. I have watched numerous tutorials, but most have crashed m ...

Combining verification with Recaptcha (or necessary information)

I'm looking to customize a form below by setting certain fields as required based on different conditions. I would like the Name and Email fields to be mandatory, with a popup alert if they are left empty: Name Email If the "Phone" checkbox i ...

The horizontal scrollbar is not displaying

(RESOLVED) Currently, I am developing a movie app that displays film titles through an Accordion feature using Bootstrap. Specifically, I have created an Accordion that showcases movies added to a favorites list. The intention is for this favorites secti ...

Learn the method of showcasing a JavaScript variable value within an HTML href tag

Currently, I am in the process of rewriting my URL and category name to be passed into the URL. For this purpose, I am creating a URL friendly string using the following JavaScript function: function getUrlFriendlyString(str) { // convert spaces to &ap ...

How can I use Vue.js @scroll to create a dynamic CSS property?

I am developing a vuejs component for my project and I am looking to implement a zoom functionality on scroll within a div, similar to Google Maps. <div @scroll="zoomOnScroll"> <Plotly :data="info" :layout="layout" :display-mode-bar="false"&g ...

Margin and padding have the ability to increase the size of an image

Is there a technique to position the logo.png so that it appears approximately one-third of the way across the page without affecting its size? I've attempted to use padding or margin adjustments, but it seems to distort the image despite having limit ...

JSP staying away from servlets

On my website, I have a .jsp page with a form like this: <form name="myForm" method="post" action="LoginServlet"> <div class="form-group"> <label for="exampleXPID">userid</label> <div class="input-gr ...

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Struggling to incorporate div elements and generate graphs with Google charts? The issue arises in the draw function, where attempts to access a div element using document.getElementById() result in null values and an error message stating "container not ...

Discovering the Javascript Code Executing on a <span> element with the Help of Chrome Inspector or Firebug

I have encountered a situation where a website is dynamically generating information into <span></span> tags using jQuery. The span has a class of "Price" and an id corresponding to a Product Code, with the data being pulled from a JSON data sh ...

Navigating Dynamically between tabs - A How-to Guide

I am working on a mat-tab Angular app where I need to dynamically generate links and transfer them to a navLinks object. Despite ensuring that the concatenation is correct, it seems like my approach is not working as expected. Here's a glimpse of what ...

Using jQuery AJAX to Transfer Data to a PHP Script

There is a div element with a data-id attribute. The goal is to use jQuery to detect when this div is clicked and then send or store the corresponding data-id value in a PHP file. However, the code provided raises an error when trying to obtain the data-id ...

I'm having an issue with my progress bar in ReactJS - it seems to move when I scroll the window instead of

My code includes a progress bar that works fine - it shows a movable progress bar when the window is scrolled. However, I want the progress bar to move when scrolling inside my div, not on the entire window. I am currently using jQuery for this functionali ...

The JavaScript code is failing to retrieve the longitude and latitude of the location on a mobile browser

I am having an issue with my Javascript code not properly retrieving the longitude and latitude from the mobile Chrome browser. While this code works fine on laptop or desktop browsers, it seems to be failing on mobile devices: <script> if (nav ...

The CSS Validator does not recognize the CSS pointer-events and appearance properties

I'm a CSS beginner who recently created an app. I've encountered some errors and warnings when validating my CSS code: https://i.stack.imgur.com/g4MUz.png https://i.stack.imgur.com/Es1DE.png Could someone kindly explain these errors and warnin ...