New bug in IE11 -- scrolling position:fixed + background-image elements jitters badly.

visit the following page in IE10 and IE11, and use your mouse wheel to scroll the page:
http://www.oussamaharb.com/
In IE <= 10, Safari, Chrome, and FireFox, the header section of that page stays put when scrolling. However, only in IE11, when you scroll the page the the header jumps around and jitters. Essentially IE11 will do this on any div with a fixed
background image.
Note the jitter does not happen if you grab the scrollbar with the cursor and move it up and down (which people rarely do). Some sort of bug when using mouse wheel has been introduced in IE11.

You are too late to see. He removed
background-attachment:fixed with IE11. His link originally showed the stuttering. It looked too unsatisfactory.
You can still see his handsome design with FireFox where it continues to work well. (And also good with Chrome, Opera, Safari too). See how the picture on top stays fixed when you scroll the page? Not with IE anymore. With IE
that great effect is removed, sacrificed to cure the ugly wart. The picture now just scrolls upward with the page to avoid the IE11 bug. Too bad.
Since your first reply here 7 months ago. Have you any special MVP insider-info yet how to make this great CSS3 port-hole feature scroll smoothly with IE11? Or possibly, you have encouraging news that it will become corrected in IE12? Your
name is IECustomizer MVP. It sounds like you will know.
Here are more stutter examples for you to examine. You may click the background to toggle several different ways to see the affliction during scroll. Please post back and tell your observation that you can see this stutter.
https://googledrive.com/host/0B8BLd2qPPV7XOGl1Sjk3c29uVlU
Possibly somebody still hasn't yet noticed in bryanangler's example ("OP"), IE11 needs to be maximized (or large) to observe the problem. At least,
somebody has not acknowledged. Bryanangler's page is Responsive Web Design (RWD). The menu on top is present when space permits. That's when the
background-attachment:fixed applies and makes the horrid stutter.

Similar Messages

Fixed Background Image

How can I get a fixed background image in my iWeb? The kind where it stays put and the text scrolls.

Can anyone help with this please?

Fix background image within div

Hello
I've done a lot of research about this, and tons os answers have come up, still, none solved my problem so far.
I'm trying to make the background image within a div to be fixed when i scroll vertically.
Have a template made, in which the only editable div is the rightdiv. (in red, to be easier)
Here's my code
CSS
body {
margin-top: 0px;
margin-bottom: 0px;
background-position: center center;
background-image: url(../Images/bgdr.jpg);
background-repeat: no-repeat;
#wrapper {
height: 875px;
width: 1000px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 214px;
width: 1000px;
background-image: none;
position: relative;
padding-top: 10px;
#leftDiv {
clear: none;
float: left;
height: 500px;
width: 245px;
position: relative;
text-decoration: none;
#rightDiv {
clear: none;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;
#footer {
height: 100px;
width: 1000px;
clear: both;
position: relative;
padding-bottom: 20px;
And here is my HTML

<div id="rightDiv" style="background-image: url(Images/informacao.png)">
</div>

Well, thing is that on Internet Explorer 9, the background image will repeat vertically when i scroll vertically. On Chrome it will stay fixed on scroll (and that is what i want).
I tried adding style="background-attachment:fixed" , but that will make the image align fix itself relatively to the whole page, not the div only. Also, it repeats itself 4 times to oocupy the screen. I can solve that by "no-repeat", but it still is fixed to the browser page, not the div.
I've been trying to fix this for days.. Help would be much appreciated.
Funny thing is that this only happens in IE9.. Chrome works perfectly.

DevilUrd wrote:
Didn't work. sorry, but i don't think i understood ur reply quite well..
Here's what i used:

<div id="rightDiv" background: url('Images/informacao.png') no repeat fixed;>
<tr>
<td>textextextextextextextextext</td>
</tr>

Could u pls be a little more detailed?
sorry, but i'm still very unexperienced at this..
That is not a valid way to write css into your page and will not work. You appear to be trying to use the background shorthand css property within the html tag itself. If you want to use an inline style, it would need to be within the style html attribute...
<div id="rightDiv" style="background:url(Images/informacao.png") no-repeat fixed top left;">
But it would be better to place it in your css instead...
#rightDiv {
clear: none;
background:url(Images/informacao.png") no-repeat fixed top left;
float: right;
height: 484px;
width: 755px;
position: relative;
overflow: auto;

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Fixed background image not wanted

Hi all,
I am having a problem that has me stumped. I have a background image applied to a div and even though I haven't specified anywhere in the css for this image to be fixed position, it will not scroll with the rest of the text. I have tried to apply background-attachment css of scroll etc, but nothing is changing.
Here is the page in question - http://www.sheffieldstudent.co.uk/test/studentstrology_may2011.html
CSS is here: http://www.sheffieldstudent.co.uk/test/_css/student.css
Any ideas? Thanks.
PS: Sorry for the slow DL speed but I haven't compressed the images yet.

As for the text resize layout problem, I see what you mean. I don't know any other ways of accomplishing the same design without using background images for the navigation. Would there be a better way?
Sure - each text block would need to be in its own container, each with its own background image. That way, when the block expands vertically, the text doesn't overlap other background images. Your background images would have to be designed to allow this vertical expansion, however, which could be tricky or impossible depending on the complexity of the image.

How to make a fixed background image in Dreamweaver CC

I'm trying to make my background image fixed so when I scroll down in Dreamweaver CC it stays completely still, could someone please tell me how to do that?

You've got a lot of code that you don't need. And I'm very dubious about the file:/// path to your image. Are you working in a Defined Local Site Folder? The image path should be pointing to your site, not files:/// on your local hard drive.
body {
background:#000 url(concept_watch_dogs___wallpaper_1366x768_by_mackintosh141-d6led76.jpg) no-repeat center center fixed;
Nancy O.

Invisibles are creating a new page when I try to move background image....

Hey Guys.
I am doing a resume for a friend of mine and its quite simple what Im trying to do;
-Background image
-Image
-Text
And I noticed when I try to put the background image to fit the background that it will create a new page... but I can't seem to find how to get around this problem... can anyone help?
Here's a screenshot: http://i46.tinypic.com/nf1t3r.png

JoeyDee
Your image has word wrap on it that is squeezing out either text or a page break underneath.
The process and fix (turn off word wrap for the background image) were described here:
http://discussions.apple.com/thread.jspa?threadID=2166684&tstart=45
Peter

Using a fixed background image

I am just getting started with Muse, and am trying to duplicate a site that I'm building in Dreamweaver. My site has a stationary background that stays fixed as I scroll the page down or up. Is there a way to do this with Muse?*

Hi Jerry,
Welcome to the world of Muse! I am very much an amateur, still learning Muse and never used another program, so I hope this is what you are actually looking for...
It depends... if you use the image as a browser fill, make sure that you uncheck the scroll box at the bottom of the fill options. If you are placing the image directly onto the page, then just pin it - select the image, go to the pin option to the left of the x-y-w-h- coordinate settings on the control panel, and click on one of the dots.
Hope this helps....
Kate

Fixed Background/Scrolling text table

I have a fixed background image (no repeat) I have a table
inserted (760px) that contains my text. My pages are different
lengths. How do I get the table to scroll over the background
image? (www.soulseekers.org.uk) Thanks for your help....

Just be aware that background-attachment:fixed doesn't work
in IE6 and
earlier on anything other than the body tag....
I'm not sure about IE7, but I think it's OK there.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"FreakyJesus" <[email protected]> wrote in
message
news:fmi781$8el$[email protected]..
>I think it looks great. If i had any quibble it would be
it's too good an
>mage
> to waste mostly hidden.
> But now I see, though, that you've made it more visible
by removing the
> black
> bg in the table, and i think it's perfect as-is. If you
do want the image
> to
> appear only behind the table (i think that's what you're
describing) then
> you
> have to cheat a little. There are few methods but i
think the easiest
> might be
> to create a DIV the same width as the table. Give it
left and right
> margins set
> to auto (to centre it on the screen) and then make your
image the
> background to
> this DIV and make it fixed like before.
> Wrap this DIV around your table, and this will give you
the effect. But
> honestly, I think it's better as you have it now with
the image taking up
> the
> wider area. I love it.
>
> Andy
>

Can I, as a webmaster use the bgproperties="fixed" html to show a non scrolling, fixed background?

Here is my body tag...
<body onLoad="scrollit(100);" BGPROPERTIES="fixed" background="images/highway-bg.jpg">
I want my background to be fixed. Will this work in the Firefox browser? Is there another way?

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

Div background images moving in template

I am using a "stock" css layout (from Dreamweaver). I have a
header div with an image placed in it with text on top. I have made
some content text editable on other parts of the page, however when
I make the page a template the image placed in the div disappears.
I checked the code, and the .jpg is still listed. Any ideas or
suggestions on how to fix this would be appreciated!

Line 30?
Can you upload the page and post a link instead?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"VIPGuilford" <[email protected]> wrote in
message
news:[email protected]...
> Ok. here is the code. The reference to the image.jpg is
on line 30. It was
> placed as a background image in Header div in DW.
> and the text was placed on top..thanks for your help
everyone ( sorry for
> all
> the commenting in the code)
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> 
> <title>Vacation Palace</title>
> 
> <style type="text/css">
> <!--
> body {
> font: 100% Verdana, Arial, Helvetica, sans-serif;
> background: #FFFFFF;
> margin: 0; /* it's good practice to zero the margin and
padding of the
> body
> element to account for differing browser defaults */
> padding: 0;
> text-align: center; /* this centers the container in IE
5* browsers. The
> text
> is then set to the left aligned default in the
#container selector */
> color: #000000;
> }
> .twoColFixLtHdr #container {
> width: 780px; /* using 20px less than a full 800px width
allows for
> browser
> chrome and avoids a horizontal scroll bar */
> background: #FFFFFF;
> margin: 0 auto; /* the auto margins (in conjunction with
a width) center
> the
> page */
> border: 1px solid #000000;
> text-align: left; /* this overrides the text-align:
center on the body
> element. */
> }
> .twoColFixLtHdr #header {
> padding: 0 10px 0 20px; /* this padding matches the left
alignment of
> the
> elements in the divs that appear beneath it. If an image
is used in the
> #header
> instead of text, you may want to remove the padding. */
> background-color: #FFFFFF;
> background-repeat: no-repeat;
> background-position: 0px;
> background-image: url(file:///Macintosh
>
HD/Users/davidwasserboehr/Desktop/lesson01/images/cloud_header.jpg);
> }

HTML background image stops being replicated in long page

This is a straight HTML (no JavaScript, no CSS) page with a tiled background image (128x128 pixel JPEG). After about 2/3 of the roughly 3,000 lines of this page the background image stops, with a smooth horizontal divide: the tiled image background above, and a white background below. The discontinuity moves up and down some while scrolling this page, but remains a clean horizontal break.
This is new behavior with Firefox 7. The background image was displayed throughout the full page with Firefox 6 and earlier.

Hi vestibule, the home page renders out to 42072.5px tall, and Firefox has a bug that limits backgrounds to a height of approximately 32735px tall. See [https://bugzilla.mozilla.org/show_bug.cgi?id=671302 Bug 671302 – cairo-gdi: large background-images and gradients don't work beyond ~ 32735px].
This bug is coming up on a year old and for some reason hasn't been fixed yet, perhaps because such long pages are relatively rare on the web. ??
Until that is resolved, to make the "transition" less jarring, you can add a matching background color (this is the closest I can come up with at the moment):
<br>body {
background-image: url(Image_Files/parchmnt.jpg);
background-color: #f8f8d4;
}

Background Image Disappears in Design View

Hi, I am new to website design and just recently the background image stopped showing up in design view. When I switch to live view and check in the browser though the background shows up again. It used to work before but it just stopped working recently. I have been trying to find a solution but it has not been working out. If anyone has any ideas as to what could fix my problem, it would be greatly appreciated.
Here is my css
@charset "UTF-8";
#container {
          height: 1280px;
          width: 960px;
          margin-top: 0px;
          margin-right: auto;
          margin-bottom: auto;
          margin-left: auto;
          position: relative;
          background-image: url(../Images/background%20copy.jpg);
          background-repeat: no-repeat;
h3 {
          margin-top: 420px;
          margin-bottom: 195px;
          text-align: center;
          position: absolute;
          margin-left: 437.5px;
          text-transform: capitalize;
          font-variant: small-caps;
          font-size: 24px;
          font-style: inherit;
          text-decoration: underline;
h2
          margin-top: 160px;
          margin-bottom: 195px;
          text-align: center;
          position: absolute;
          margin-left: 230px;
          text-transform: capitalize;
          font-variant: small-caps;
p1
          margin-top: 350px;
          position: absolute;
          margin-left: 40px;
          margin-right: 60px;
          font-size: 18px;
          text-align: center;
When i turn it on live view it is also formatted correctly and everything. But when it is on just design or split view the text and all of the pictures don't follow any of the css.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>LADC Companies</title>
<meta name="keywords" content="LADC Companies,commercial lawn service, services, snow removal, concrete romval, Home Depot, Kohl's">
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
#NavBar {
          height: 36px;
          width: 960px;
          margin-right: auto;
          margin-left: auto;
          margin-top: 102px;
          margin-bottom: 146px;
          border-top-style: none;
          border-right-style: none;
          border-bottom-style: none;
          border-left-style: none;
          position: absolute;
          left: auto;
          top: auto;
          right: auto;
          bottom: auto;
#apDiv1 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 65px;
          top: 197px;
#apDiv2 {
          position: absolute;
          width: 207px;
          height: 143px;
          z-index: 1;
          left: 268px;
          top: 197px;
#apDiv3 {
          position: absolute;
          width: 201px;
          height: 142px;
          z-index: 1;
          left: 204px;
          top: 0px;
#apDiv4 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 684px;
          top: 205px;
#apDiv5 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 2;
          left: 410px;
          top: 13px;
#apDiv6 {
          position: absolute;
          width: 200px;
          height: 115px;
          z-index: 1;
          left: 204px;
          top: 0px;
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onLoad="MM_preloadImages('Images/navover_01.gif','Images/navover_02.gif','Images/navover_ 03.jpg','Images/navover_04.gif','Images/navover_05.jpg')">
<div id="container">
<div id="NavBar"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','Images/navover_01.gif',1)"><img src="Images/background-copy_01.gif" width="192" height="36" id="Home"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About us','','Images/navover_02.gif',1)"><img src="Images/background-copy_02.gif" width="192" height="36" id="About us"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Services','','Images/navover_03.jpg',1)"><img src="Images/background-copy_03.jpg" width="192" height="36" id="Services"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Gallery','','Images/navover_04.gif',1)"><img src="Images/background-copy_04.gif" width="192" height="36" id="Gallery"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','Images/navover_05.jpg',1)"><img src="Images/background-copy_05.jpg" width="192" height="36" id="Contact Us"></a></div>
<h2>LADC Companies... "your #1 outsource resource"</h2>
<h3>Services</h3>
<p1>LADC Companies has strived to put the service back into "service" since it started in 1986. Since that time LADC has delivered, as promised, its commitment to first rate quality service with in-house personnel to meet its client strict demands and expectations.</p1>
<div id="apDiv1"><img src="new truck.JPG" width="204" height="143" /></div>
<div id="apDiv2"><img src="IMG_2425.jpg" width="204" height="143" alt="HOME depot" />
    <div id="apDiv3"><img src="Images/2011-07-26_12-59-24_137.jpg" width="204" height="143" />
      <div id="apDiv6"><img src="Images/DSCN0147.jpg" width="204" height="143" alt="concrete" /></div>
    </div>
</div>
</body>
</html>

CSS Background Image - where is it?

Hello, Have placed a fixed background image within my
CSS...it looks fine when I look at it in Dreamweaver. The problem
is when I upload to my webspace the image isn't there. Any ideas?
These are the attributes:
background-attachment: fixed;
background-image: url(images/home.gif);
background-repeat: no-repeat;
background-position: 1px;

dulcettones" <[email protected]> wrote in
message
news:f3m22g$kpu$[email protected]..> Sorry...the
URL is:
> www.notjustthenews.co.uk
> The image in question goes in the top left corner and
changes depending on
> the section you're viewing.
Remove: background-attachment: fixed; and you'll see the
image shows up on
the index page. You need to remove that on each of the rules
you have set
for the #top divs... some of them are missing the white
background color
also.
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
Spry Widget Examples
http://www.dreamweaverresources.com/spry-widgets/

Is there a way to control how a background images appear on all browsers?

I have created a site that includes a fixed background image so that the only thing that scrolls is the main container that holds all the content. But I don't want it tiled. I want this one image to fill the entire screen behind the container. Is this possible to control from my end (by settings or by sizing the image in a certain way) or is this something that I can't control at all?

This http://www.onextrapixel.com/2012/03/02/using-css-background-size-responsively/ may help

New bug in IE11 -- scrolling position:fixed + background-image elements jitters badly.

Similar Messages

Maybe you are looking for