Animation of multiple background image positions via keyframes works in Chrome & Safari, not Firefox.

The goal is to create an infinitely scrolling, two-layer parallax, patterned background. The effect works perfectly in Mac Chrome 35.0.1916.153, Mac Safari 7.0.4, iOS Chrome 35.0.1916.41, and iOS Safari 7.1.2, but it stutters in Mac Firefox 30.0 (haven't tested on iOS FF).
My code is visible at http://jsbin.com/cifig/2 and is basically modeled after http://davidwalsh.name/multiple-background-css-animations (demo http://davidwalsh.name/demo/multiple-background-css-animations.php).
If I make either one of the following changes, the stutter in FF resolves:
• Limit `background-repeat` to `repeat-x` or to `repeat-y`.
• Remove one of the two animated backgrounds.
So it seems FF can't handle the continuous animation of two backgrounds that each have background-repeat, whereas Chrome and Safari can.
Any tips? Thanks!

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.

Similar Messages

Paste image from clipboard works in Chrome but not in Firefox

Hi there,
I would like to know a bit more about the technical reasons why image pasting from clipboard works on Chrome but not Firefox.
Steps to reproduce:
1. Open the text editor on github.com, e.g. by commenting on an issue
2. Copy an image to clipboard
3. Put the mouse cursor into the text editor area
4. Use CTRL+V to paste the image into the text editor
On Chrome, the image is pasted and automatically uploaded on Github. On Firefox nothing happens.
Can someone please shed light on this lacking feature?
I would so much love to see support for this on Firefox as it is a very convenient functionality.
Thank you!

The best is to try it yourself I guess.
Go to Github and try pasting an image into the compose editor.
The editor definitely supports image pastings. They work directly in Chrome(ium).
Thus I am wondering why Firefox does not support direct pasting from clipboard into the editor.
See the attached screenshot regarding the editor I am talking about.

Background Image Position Whole Numbers vs Decimals

Hi EA experts,
I'm using sprite sheets to create animations in Edge Animate CC and have run into a peculiar problem: Occasionally, when I am animating frame-to-frame and changing the background image position, the numbers I input (for example, -400) end up somehow being changed to a value a few decimal points off (such as -399.96). When playing the animation back, even this tiny fraction of a pixel difference ends up causing the sprites to shift and play back choppily. What's more frustrating still is that Edge Animate shows the X/Y values as the correct whole-numbers I inputed, until I click on them (see attached). Given the amount of animation I'm doing, now that I've found out this is the problem, I have maybe hundreds of X/Y values to correct.
The whole number I input is displayed...... until you click, and see that it's off a bit
Is there a way to easily correct this? Perhaps a way to make Edge Animate only accept whole numbers for background image position values?
Thanks,
-Adam

Whole numbers kick decimal butt.
Also, that's not how you calculate leap years. Just
an FYI.What is it? Leap year if %4 == 0 and %100 != 0?
I think... whatever, Google is your friend.

Background, Images, & text is blacked out. I can not see any menus to edit anything... Help

Background, Images, & text is blacked out. I can not see any menus to edit anything...
The curser shows there are links when you move over. I have uninstalled and re-installed Firefox and restarted my computer with no luck.
I can not see the menus to try and reset Firefox or change any settings.
HELP Please

hello obrienn214, other users with this problem all had an embedded intel hd3000 graphics card with an old driver present. in case this also applies to you, here would be a link to update the driver, which in turn should also address the black firefox problem: https://downloadcenter.intel.com/Detail_Desc.aspx?DwnldID=23764 (for win7 64 bit)
in case this doesn't solve the issue or does not apply to your system, start firefox into safemode '''by pressing the shift key while the application is launching''' & disable hardware acceleration in the firefox ''menu ≡ > options > advanced > general'' (that setting will take a restart of the browser to take effect).
[[Troubleshoot extensions, themes and hardware acceleration issues to solve common Firefox problems]]

Pinning Multiple background images

Hello,
I am working on a site and want to get an effect similar to this site: http://mariusz.cc/ that has multiple "pinned" background fill images. Content boxes and photos scroll over the background images yet when you scroll down you get new backgrounds. Simply using the "pin" feature on Muse will not allow you to scroll past the image. The new parallax scroll feature does not work on full browser width content, from what I saw, so that's a no go as well.
Does anybody have any ideas on how to replicate this? Thank you in advance.

Matt --
You are correct, 100% width objects do not currently work with scroll motion objects (for the moment ;-), but you can achieve this effect by creating extra wide images that are likely wider than most desktop systems. Two Muse template resources -- MuseThemes.com and MuseGrid.com have templates that are using this approach -- MuseThemes.com created a video describing the step-by-step process that you can review here: http://www.muse-themes.com/pages/video-training. Hope this helps.

BG image swap won't work - any ideas why not?

http://designerandpublisher.com/test-bg/test-bg-page01.html
Hi - I'm trying to set up a background image swap where when the user is viewing the site and clicking on links, the background image will change. You'll see the soldier one there now and I have others.
The JS file the 2 HTML pages are linked to doesn't seem to be working [see above].
Any ideas why it's not working, or is there a better JS file anyone may be aware of that does what I'm looking for?
Thanks - Deaf Guy

Hello - I wanted to post an update on this topic and am wondering if someone can still help me. I figured out a way to make background images change on refresh. You can see it here:
http://designerandpublisher.com/test-bg/index.html
I added a piece of JS to make the wrapper images change. Although the image swap works now, this is really not a true background image swap because it is not swapping images in the body tag. What I'd really like to do now is go into the body tag and somehow point it toward this JS code so that when the page is refreshed, it will pick up the image swap array. I'm not sure if this is possible though.
Is there a way to do this?
Thanks - Deaf Guy

Firefox not showing correct HP background image/video, but IE (all versions), Chrome and Safari are. How do I fix this ASAP?

Website www.bludot.com is not showing the proper BG image/video on all browsers (Safari, Chrome and all IE versions) but not on Firefox. The code is right, but FF is still pulling old images. The correct image/HTML5 video should be a cake, as displayed on all other browsers.

Firefox 9 is being withheld for Mac users due to unresolved crashing problems.
A test case would be nice and the URL for the website in question, so someone here can experience that problem first hand.
Or, 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.

Firefox crashed when I try to get into my work site via citrix. Internet explore does not firefox 7.01

I have firefox 7.01. and every time i try to log on to my work site via the web and client server, firefox crashes and leaves not log.
Internet explore works without issue.
How do I stop the system from crashing - i didnt have a problem in earlier versions of firefox.

This is a chronic problem. Not related to time of day. It is a permanent block on my ability to log into my Yahoo mail from the Firefox web browser on one computer ONLY. I can log in from other computers. This seems to have nothing to do with add-ons or extensions. Upgrading from Firefox 3.6 to 4.0 had no effect and this also does not effect any other web browser on the same computer.
Again, every time on try to log into my Yahoo mail using Firefox on my main desk time I get a "404 Not Found" error.
Please give me a serious answer.

Image.source in ItemRenderer works in Windows but not Mac

I have a Flex (AIR) application that is giving me problems on
the Mac. In one of the
Datagrids, I am using an ItemRenderer with an image control.
Some code in the
"set data(value:Object)" function assigns a file path as the
source of the image
control as follows.
imgThumb.source =
File.documentsDirectory.resolvePath("pdqtemp").nativePath +
"/" + data.strJPGFileName;
This works correctly in Windows , but not on the Mac.
In this case, the path resolves to the following on the Mac.
/Users/brian/Documents/pdqtemp/artist_01t.jpg
I have verified that the file is in the right place and when
using the path in
the command line console, it correctly addresses that
directory and file. I
don't normally develop apps for the Mac so I am sure there is
something I am
missing.
Any ideas?
Thanks for your help.

Hi Jed,
Thanks for responding
That is the exact path assigned to the Source of the Image
control. However, it isn't exactly a trace of the Image.Source
property.
The code in question is attached
The alert shows the path I originally posted and shows that
the fileImgThumb.exists returns False.
As I mentioned, this works perfectly in Windows. There is
some code elsewhere in the app that creates the thumbnail. That
does work on the Mac as the thumbnail image is created and saved
where expected.
I am not sure what I might be doing wrong.
Thanks for your help,
Sid

Deployment via JDev works, OEM - File Upload not!?

Hello!
A weird thing for you. I try to deploy a, 10.1.2 to 10.1.3 migrated, Struts-App.
Deploying via JDev to Standalone OC4J 10.1.3 works fine!
Deploying via OEM - File Upload to same OC4J ends in error:
In XYZ.war missing Standard-Deployment in WEB-INF/web.xml
Deploying via JDev to OAS 10.1.3, I get the same web.xml error.
Deploying via OEM - File Upload in OAS 10.1.3, I get the same web.xml error.
Any Ideas why XYZ.ear with same web.xml will be accepted via JDev - Deploy on Standalone OC4J, but not via File Upload and not on OAS?
Thanks, appreciate your help.
Phil

Herko_ter_Horst wrote:
And you think using HTTP magically allows you to upload a file to the server without a username and password?My friend I believe you need a good reading skills apart from devicing ur own sarcastic replies :)
Well here is an idea for you.
Try Mounting /Map the remote storage location / drive to the Application Server Machine and try saving files using mapped location.What i adviced OP is to choose / decide his own remote storage location / medium and have asked him to map it as network drive or mount the respective storage location and asked him to program his application such that for every valid multipart request the application saves respective file in the respective mapped drive or mounted location.
Now this was done just to address his motive for maintaining a remote repository for file storage which was
The next stage is to move it from the webapps server to another server.And i hope someone need not become a magician to solve this :)
NOTE: This would involve very little bit change in application source.To me all it calls for is change in repository location.
REGARDS,
RaHuL

Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
here's my code if it helps to answer
<!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>Main</title>
<style type="text/css">
body {
background-image: url(images/realgrade.jpg);
background-repeat: repeat-x;
text-align: center;
html, body {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 0px;
padding-top: 25px;
#wrapper {
width: 930px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
background-repeat: no-repeat;
#header {
height: 192px;
width: 237px;
background-image: url(images/logo_fill.jpg);
background-repeat: no-repeat;
position: absolute;
left: 35px;
top: -25px;
#mainNav {
background-color: #33F;
height: 200px;
width: 272px;
float: left;
margin-top: 233px;
#maincontent {
height: 600px;
width: 608px;
float: right;
margin-bottom: 45px;
padding-right: 25px;
background-repeat: no-repeat;
background-position: center 270px;
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
#sidebar {
background-color: #F36;
height: 250px;
width: 272px;
clear: left;
float: left;
#footer {
height: 525px;
width: 870px;
clear: both;
padding-top: 45px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
background-image: url(images/footer_image.jpg);
background-repeat: no-repeat;
margin-top: 45px;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <p> </p>
    <p> </p>
    <p> </p>
</div>
<div id="mainNav">
<p> </p>
</div>
<div id="maincontent"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
here's what I'm going for
here's what I'm getting in the browser
Please help!

Your image files are pointing to your hard drive, not your server. You have this
background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
and you should have this
background-image: url(imag es/opaqueMaincontent.png);
Also, is your images file named imag es?
Gary

Problems to add a background-image to the widget Spry MenuBar!

With DreamweaverCS4 version 10.0 Build 4117, (italian language) I have tried to add a Spry MenuBar to the one website page.
But the problem is that I haven't understood where add my property "background-image": url(../immagini/Menu_Button_01.gif).
In the Application Page of Dreamweaver I have this screenshot:
But in the Preview Window of InternetExplorer 7 I have this strange behavior:
The "Menu_Button_01.gif" are a rounded square button made with PhotoshopCS4 and have a transparent background.
In the IE7 MenuBar doesn't appears as expected, without the transparent background!
1) How can I do to show my "Menu_Button_01.gif" image as transparent background in the MenuBar?
2) What is the correct CSS Style Rule to apply the "background-image" property?
(Example: "ul.MenuBarHorizontal li"? Or "ul.MenuBarHorizontal a"? )
3) Should I also apply the property: "background-color:transparent"? Where? What is the specific CSS Style Rule?
I have uploaded my little local WebSite to Rapidshare (100KB):
http://rapidshare.com/files/370735082/Test_Spry.zip.html
Please download it to inspect my problem.
Please response me!
Horsepower0171.

For a starter, you should not put your background style rules in the following. The accompanying descriptions will tell you this.
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: 116px;
    float: left;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 116px;
    position: absolute;
    left: -1000em;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
Then when you apply style rules to
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
    background-image: url(../immagini/Menu_Button_01.gif);
    background-color: transparent;
this will be overridden by the following rules. They replace your image with an arrow image.
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
There are one of two solutions
If you do not want and arrow, simply set background to none in the above four instances.
If you do want an arrow, include a down arrow image in a second Menu_Button_01.gif image called Menu_Button_01_DownArrow.gif or similar as well as a third one for your right arrow image.
I hope this helps.
Ben

Spry Menu Background image not working in IE

I have created a website using Dreamweaver CS5 and having trouble with my Spry bar in internet explorer. It looks great in chrome, firefox, etc, but in IE there is a white background instead of my background image and the submenus have moved WAY right.. can someone help me!
SpryMenuBarHorizontal.CSS is below:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 800px;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
ul.MenuBarHorizontal li a{
color:#FFF;
ul.MenuBarHorizontal li li{
background-image: url(../images/menu_background1.jpg);
ul.MenuBarHorizontal li li a{
color:#000;
ul.MenuBarHorizontal li li li{
background-image: url(file:///E|/MAIN_website/images/index_06.jpg);
ul.MenuBarHorizontal li li li a{
color:#FFF;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
color:#33CCFF;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 160px;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #FFF;
text-decoration: underline;
/* [disabled]background-image: url(file:///E|/MAIN_website/images/menu_background.jpg); */
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Because I can't see your site and code in context, I will make a guess that this style is throwing off your alignment:
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: center;
cursor: pointer;
width: 160px;
float: left;
background-image: url(file:///E|/MAIN_website/images/menu_background.jpg);
Remove the text-align:center; from the above style.
Instead of centering your list element (li), center the link text (a) itself:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #FFF;
text-align: center;
text-decoration: none;
font-family: Cambria, Arial, sans-serif;
font-size: 14px;
If you don't want the submenu text to be centered, do this immediately after the previous style:
ul.MenuBarHorizontal ul a {text-align: left;}
The sub-submenus are also set up by default to be jogged a bit to the right. You can adjust this style:
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
that causes sub-submenus to fly out to the right of the submenus to which they attach.
Submenus themselves (not the sub-submenus) should fall directly under the top menu item by default, once you remove the text-align: center; on the li item (above).
Beth

How to put a background image in coldfusion page?

Hi all,
I have created number of coldfusion pages,i would like to have a background image for them either unique or different images.
So i have created a style.css and added a line for background image like
                    background-image: url(/images/nature.jpg);
But it doesn't works.
Even i tried this by giving in head section of all my cfm pages but it doesn't work.
Also i have used
<head>
     <style type="text/css">
          html {overflow-y:hidden;}
          body {overflow-y:auto;}
          #page-background {position:absolute; z-index:-1;}
          #content {position:static;padding:10px;}
     </style>
</head>
<body>
     <div id="page-background"><img src="images/sri.jpg" alt="Smile"></div>
         <div id="content">
              This is body content
         </div>
</body>
but the alt value 'smile' only appearing not the image.
I'm working on CFBuilder.
Both firefox and IE not displaying the image
Any help appreciated,
Chandru P

The fact that this is in a CF template is neither here nor there (other than the caveat about # as the other person said).
All CF does is generate mark-up. The mark-up is sent to the browser, and the browser renders it. So if your browser isn't rendering your image assets, it's because it can't find them.
I suspect your URLs are wrong. Are you getting 404s for the image URLs?
One thing to bear in mind is that URLs to resources are not relative to the CFM template they're in, they're relative to the URL the client requested, which are not necessarily (indeed very infrequently ~) the same.
Adam

FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

Figure I'll mention this here as well.
When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
Thanks,
Mark H

I tried, but could not see and problem.
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
Thank you!

Animation of multiple background image positions via keyframes works in Chrome & Safari, not Firefox.

Similar Messages

Maybe you are looking for