Issue with background image positioning in IE 7 while scrolling

I am struggling with creating nested divs where the middle one has a fixed background image that remains static while the rest of the content scrolls. My solution works in Firefox, Chrome, and Opera but I'm encountering issues in IE7. Despite knowing it's a known bug in IE7, I haven't been able to find a resolution.

<div style="width: 240px; height:320px;">
<div style="width: 240px; height:320px; background: url(http://new-things-to-come.com/imgs/prsite.png);position: relative; background-color : #666; background-repeat: no-repeat; background-position: top left; background-attachement: fixed; text-align: left; color: #fff;  font-family: Verdana, sans-serif; font-size: 100%;;overflow-y : scroll;">

    <div>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gub...
        </p>
    </div>

</div>

You can view an example here.

Thank you.

csshtmlbackground-imageinternet-explorer-7

Answer №1

If you include background-attachment: fixed; in your CSS, the issue seems to be resolved.

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

Is there a way for me to adjust the font size across the entire page?

Most CSS classes come with a fixed font-size value already set. For instance: font-size: 16px font-size: 14px etc. Is there a way to increase the font size of the entire page by 110%? For example, font-size: 16px -> 17.6 font-size: 14px -> 15.4 ...

javascriptcssvue.jssass

Struggle with Arranging Elements in CSS using position absolute & relative

Currently tackling a project involving adjusting the positioning of elements within a sidebar. The sidebar holds Font Awesome icons and corresponding text elements, with the goal of moving both the icons and text together as one unit using attribute and cl ...

htmlcssiconscss-positionfont-awesome

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

javascripthtmljsonmootools

Navigation menu that is vertical and includes submenus, where the parent list item remains active even when visiting subpages

I'm currently utilizing Jekyll and Compass to construct an interactive prototype. Within one of my includes, I've implemented a sidebar navigation. The challenge arises when dealing with submenu items, as the active class on the parent (li) does ...

jqueryhtmljekyllnavigationbar

What are some ways to enhance the loading time of my PHP-powered website?

Having troubles with my PHP-driven website that showcases real-time stock market data due to slow loading speeds. The site utilizes PHP for scraping financial information from external sources and presenting it on the front end. However, the performance is ...

javascriptphphtml

Having trouble with the image not showing up using the code <img src="">

UPDATE :: I recently discovered that there is a permission error preventing me from accessing images in the images folder. It seems that I do not have the necessary "permission" to retrieve the image files ... * A few days ago, I posted a question regardi ...

phphtmlmysqlimage

Could you please ensure that the animation activates upon hovering over the "a" element?

Utilizing bootstrap, I have created the following code. I am looking to add functionality that triggers an animation upon mouseover of an img or a element, and stops the animation upon mouseleave. .progress-bar { animation: pr 2s infinite; } @keyfr ...

javascripthtmlcssbootstrap-4bootstrap-5

Utilizing HTML5 Video Autoplay with AngularJS ng-show: A Comprehensive Guide

How can I implement a video using the HTML5 video tag with autoplay in an AngularJS web application? I attempted to use the following code: <video ng-show="condition" autoplay ng-src="{{video.src}}"></video> Upon loading the web application, ...

angularjshtmlvideo

Tips for eliminating the default arrow on the HTML select tag?

I am currently utilizing vuejs along with tailwindcss and I am trying to figure out how to get rid of the default arrow from an HTML select element. Despite my attempts to remove it by using CSS properties like -moz-appearance, -webkit-appearance, -ms-appe ...

htmlcssvue.jsdrop-down-menutailwind-css

Boost Page Text Size Using CSS

Possible Duplicate: Allowing users to adjust font size on a webpage My goal is to create webpages where users can click an image to increase the font size of all content. Is this achievable? If so, how would I go about implementing it? I am aware that ...

css

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

htmlcsstwitter-bootstrapbootstrap-4

Employ JQuery and Ajax to develop an autocomplete/suggestion feature that generates a list based on JSON data fetched from an API via PHP

I'm facing challenges in developing a dynamic auto-suggest feature for a search field using JQuery with data in JSON format. The JSON data is fetched from an API through PHP. The objective is to have the auto-suggest list update with each keystroke e ...

phpjqueryhtmljsonajax

Stacking of div elements is not possible when they have a position relative

To summarize, I created a container div (parent) with a relative position and then added 3 children divs with absolute positions. Now, I am attempting to add another div that should appear below all of this content, essentially representing the next sectio ...

htmlcss

Refresh a Div using JSON content with Struts2 Jquery Plugin

Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...

jqueryjsonhtmlstruts2reload

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

I am currently working with a CSS grid layout that is displaying as follows: .image__gallery-grid { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5rem; dis ...

htmlcss

Developing an object that displays animated effects when modifying its properties, such as visibility, and more

Exploring the realm of animations in JavaScript and AngularJS has led me to the idea of creating a unique JavaScript object. Imagine having the ability to define an object where setting an attribute like obj.visible = true Would automatically make the ...

javascripthtmlcssangularjsionic-framework

The argument in question has not been defined

Experimenting with AngularJS, I encountered an error message in the browser console when trying to display a particular example: Error: Argument 'mainController as mainCtrl' is not a function, got undefined at Error (native) at bb My pr ...

javascripthtmlangularjs

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like: /*1280 x 1024*/ /*1280 x 960*/ /*1280 x 800*/ /*1280 x 7 ...

htmlcssresponsive-designmedia-queries