Firefox scrolls slowly on websites with background images.

I find that when I go to websites that have background images, such as my tumblr (deshaunic.us) or the call of duty websites (http://www.callofduty.com/missions), scrolling is very slow and stutters, even though I have smooth scrolling enabled.
I have not had such issues with IE. I also have not had these issues on a different machine running Firefox 4 beta.

A workaround is to use a bookmarklet to make the background scroll.<br />
This code may not work on all sites, only if the background image is attached to the body.
<pre><nowiki>javascript:void(document.body.style.backgroundAttachment='scroll');</nowiki></pre>
See also http://en.wikipedia.org/wiki/Bookmarklet

Similar Messages

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!

Looking to create fully editable PDF files with background images

Hello and thank you, I create menu's and flyers for a group of restaurants. I need to make text editable PDF menus with background images. I believe Livecycle is able to do this, but would really like to hear it from someone who knows for sure. Again thank you.
Cheers,
Charlie

Yes it can. Download a free trial and try it out.

Help with background image center position in firefox

See here on
firefox<<<
i dont know whats going wrong, i tried many different ways
with divs only but doesnt work...
any help appreciated...
css
/* CSS Document */
body {
background-image:url("resources.jpg");
background:url("resources.gif") no-repeat center;
.textstyle01res {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:62%;
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
.textstyle01res a {
color:#FFFFFF !important;
text-align:center;
padding-top:360px;
text-decoration:none;
html
<!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=iso-8859-1" />
<link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
<title>Feast of Marriage - Resources</title>
<style type="text/css">

</style>
</head>
<body>
<div style="width:940px; height:140px;">
</div>
<div style="padding-left:227px;" align="center">
<table width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</div>
</body>
</html>

css:
table#centerTable {
margin-left: auto;
margin-right: auto;
html:
<body>
<div style="width:940px; height:140px;"></div>
<table id="centerTable" width="200" border="0">
<tr>
<td><img src="res-a.jpg" border="0"
alt=""/></td>
</tr>
</table>
</body>
Lampros_uk wrote:
>
http://www.3ddream.net/feast/resources.html<<<
> i dont know whats going wrong, i tried many different
ways with divs only but
> doesnt work...
> any help appreciated...
>
> css
> /* CSS Document */
>
>
> body {
> background-image:url("resources.jpg");
> background:url("resources.gif") no-repeat center;
> }
>
> .textstyle01res {
> font-family:Verdana, Arial, Helvetica, sans-serif;
> font-size:62%;
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> .textstyle01res a {
> color:#FFFFFF !important;
> text-align:center;
> padding-top:360px;
> text-decoration:none;
> }
> --------------
>
> html
> <!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=iso-8859-1" />
> <link href='res.css' rel="stylesheet" type="text/css"
media="screen" />
> <title>Feast of Marriage - Resources</title>
> <style type="text/css">
> 
> </style>
> </head>
> <body>
> <div style="width:940px; height:140px;">
> </div>
>
>
> <div style="padding-left:227px;" align="center">
> <table width="200" border="0">
> <tr>
> <td><img src="res-a.jpg" border="0"
alt=""/></td>
> </tr>
> </table>
> </div>
> </body>
> </html>
>
>

Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Weird issue with background image (Safari)

Just wonder if anyone can shed any light on this one....
Basically have a design in progress here:
http://www.hpwebdesign.co.uk/rachelworrall/index101.php
All was fine until I added the three images that fade into one another using the Ultimate Fade In slideshow script ( http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm )
When the page is initially loaded in Safari (5), the top section of the background image doesn't display - it starts just beneath the main content below the navigation.
The weird part is that it literally only takes a click of the mouse outside that Safari window to make it appear. A refresh, however, won't.
It seems fine in Firefox on a Mac, and the client didn't report any issue in IE.
Can anyone with Safari have a quick look and replicate that glitch? If not, then it might just be some weird local issue here.
Many thanks.

I've put up a couple of screenshots here:
http://www.hpwebdesign.co.uk/rachelworrall/screenshots.htm
Its like that in Safari 5.0.3 (and 5.0.4 which I've just updated.)
Again, it literally just needs a click out of the Safari window to make it appear correctly as per the second screenshot.
Its like this on a 27" iMac, but had a look on the macbook, and its fine on there.
So if it looks OK with anyone else, I'm just going to put it down to a weird glitch on my machine here.

Help with background image (Not sure how to ask this..........)

I have just started to try and make my first site. I designed it in Photoshop first as I learned in many tutorials. I don't know why my background image looks like this when I scale down below 100%, but at 100% or "fit all"&"fit width" it doesn't change and I can't move it with the hand tool or scroll it. I'm sorry, I'm just learning.
Thank you.

Hello,
in addition, I tried this (page properties = translated from my German DW) too an the only difference had been this "missing end bracket".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ioneglines.com</title>
<style type="text/css">
body {
background-image: url(myImage.png);
background-repeat: no-repeat;
</style>
</head>
<body>
</body>
</html>
... before you insert your image as a background image, you have to give it the dimensions, you want to see in your file. Please use try and error method.
Hans-Günter

Customizing firefox ... set my own background image for all pages I open in Internet.

The idea is in using my own *.css file as primary for all sites, i open in firefox (or just my own background image). So that this image replaces the background for all sites I open in Internet.
Maybe there is a file available in firefox 17.1 for this (maybe UserContent.css).
Thanks a lot.

Yes, you can use userContent.css for this, but it's simpler to use the Stylish extension instead.
* http://kb.mozillazine.org/UserContent.css
* https://addons.mozilla.org/firefox/addon/stylish/
You would then use something like this:
<pre><nowiki>@-moz-document url-prefix("http://"), url-prefix("https://") {
body {
background: url("file:///C:/My%20Pictures/Wallpaper/image.jpg") !important;
color: black !important;
*:not(body):not(input):not(textarea):not(button) {
background: transparent !important;
color: inherit !important;
/* Unvisited link */
a:link {
color: blueviolet !important;
/* Visited link */
a:visited {
color: indigo !important;
/* Link with the mouse cursor over it */
a:hover {
color: lightblue !important;
/* Clicked link */
a:active {
color: red !important;
}</nowiki></pre>
* To get the path of the image to use as the background, open it in Firefox and copy the URL from the address bar. Otherwise, keep in mind the protocol is file:/// that spaces must be replaced with %20 and that forward slashes must be used instead of backslashes (the latter is what Windows Explorer uses).
* Remember to define appropriate colors for text and links, otherwise they will end up unreadable against your background image.
* Even so, you can expect uneven results. Take this page for instance. “Post reply” isn't an actual button, but a link element styled to look like a button. There's no way to change these on all sites; they must be styled on a case-by-case basis. Another issue are images (e.g. the [https://support.cdn.mozilla.net/media/img/mozilla-support.png mozilla support] graphic here), which might end up unviewable against your background image.
* If you need help writing CSS, see https://developer.mozilla.org/en-US/learn/css or http://forum.userstyles.org

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

Mixed results on iPad and iPhone 6 Plus with background image. How to fix this?

Flash Professional CC
I'm having an issue with adding images on iPhone 6 plus and iPad. I'm getting mixed results with two items: 1) a background image and 2) a button that should appear at the bottom left-hand corner on any device. In one case the background image appears enlarged and only shows about 30% of itself. In the other case, the bottom left-hand button appears about 50 pixels to the left when x=0. I also get different results when I set the following:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
This does not produce the expected results. I would like to have consistent results across iPad and iPhone 6 plus, which seams to be an issue. The immediate fix for this is to leave the images on the stage instead of using addChild. I could then just stretch the background image so that it spans the whole screen. But I want to add the items dynamically for greater flexibility.
Here are two cases:
Case #1:
This an iPhone 6 plus and you should notice 2 things. 1) There is black and white on both sides. The blue background SHOULD APPEAR ACROSS THE WHOLE SCREEN. 2) The red button in the corner SHOULD APPEAR IN THE LEFT MOST CORNER OF THE
SCREEN.
Case #2:
This an iPhone 6 plus and I have set the scale X, Y to the stage.stageWidth/Height:
mc_stageBackground_Main.scaleX = stage.stageWidth;
mc_stageBackground_Main.scaleY = stage.stageHeight;
This results in a close up of the background image.
Here is the code that I'm using:
import com.greensock.TweenLite;
import com.greensock.easing.*;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//When this is active the background image spans across the device (iPhone 6 plus) correctly. The main logo image does not line up correctly.
/*stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;*/
var main_logo:MC_LOGO_MAIN = new MC_LOGO_MAIN();
var mainBackground_2208: MC_MAIN_BACKGROUND_2208 = new MC_MAIN_BACKGROUND_2208();
var mainBackground_1024: MC_BACKGROUND_1024 = new MC_BACKGROUND_1024();
var mainCorner: MC_MAINCORNER = new MC_MAINCORNER();
var chapters: MC_CHAPTERS = new MC_CHAPTERS();
var _stageWidth = 1024;
if (stage.stageWidth > _stageWidth)
    //Add bigger background if the stage is bigger than 1024
    mainBackground_2208.x = stage.stageWidth/2;
    mainBackground_2208.y = stage.stageHeight/2;
    addChild(mainBackground_2208);
    //Using this code results in a very close up view of the stage on iPhone 6 plus
    /*mc_stageBackground_Main.scaleX = stage.stageWidth;
    mc_stageBackground_Main.scaleY = stage.stageHeight;*/
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild(mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //add logo to sit at 50 pixels from the top of the stage
    /*main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});*/
else
    trace ("The stage is 1024 or smaller");
    //Add 1024 background if stage is 1024 or smaller
    mainBackground_1024.x = stage.stageWidth/2;
    mainBackground_1024.y = stage.stageHeight/2;
    addChild(mainBackground_1024);
    //Adds corner to the main screen.
    mainCorner.y = stage.stageHeight;
    mainCorner.x = (stage.stageWidth - stage.stageWidth);
    addChild (mainCorner);
    TweenLite.from(mainCorner, 1,{ height: 0, width: 0, delay:1, ease:Elastic.easeOut});
    //adds chapters
    chapters.x = (stage.stageWidth - stage.stageWidth)+75;
    chapters.y = stage.stageHeight - 120;
    addChild(chapters);
    TweenLite.from(chapters, 1,{ height: 0, delay:.5, ease:Elastic.easeOut});
    //adds the Main logo to sit at 50 pixels from the top of the stage
    main_logo.x = stage.stageWidth/2;
    main_logo.y = (stage.stageHeight -stage.stageHeight + main_logo.height *.6);
    addChild(main_logo);
    TweenLite.from(main_logo, 1,{ y: -main_logo.height, ease:Elastic.easeOut});

On all of the devices go to settings - facetime - iphone cellular calls - oFF, this part of Apple continuity.

Firefox asks what to do with an image instead of opening it

I'm not sure if there's a certain type of places or situations that trigger this but I get this from time to time while I simply shouldn't. One example from today:
While opening http://files.turbosquid.com/Preview/Content_2009_08_25__03_49_44/lav25_09.jpgd538774d-80dd-4e54-9378-73a399b5ef85Larger.jpg the 'Opening' dialogue pops up asking me what to do with the target, 'Open with' marked as default.
How I got there:
google image search for "lav-25"
http://www.turbosquid.com/3d-models/3d-lav-25-piranha-usmc-nato-nato/410876
http://files.turbosquid.com/Preview/Content_2009_08_25__03_49_44/lav25_09.jpgd538774d-80dd-4e54-9378-73a399b5ef85Larger.jpg

I get the same effect with that image. The server is probably sending the '''content-disposition: attachment''' header. That header being sent causes Firefox to even ignore the ''Always do this automatically...'' user preference.
As a workaround, you can install the InlineDisposition extension.
https://addons.mozilla.org/firefox/addon/inlinedisposition/

How do you make a rectangle resize with background image?

I'm trying to add links (transparent rectangles) to a background image that is set with "scale to fit". However when it scales in needs to scale with my links. Can I have the rectangles scale with the background image? If not is there a better way of doing this?

As I understand. correctly. You want the rectangles that you have added over background image, (to which links are added) to be responsive in layout within the project, Am I correct ? If yes ! Muse does not implement "Responsive Layout" as defined by a hand coder. For more details refer to : Can you create responsive sites with Adobe Muse?

Since Firefox 4, I can get a background image to work using base64 encoded, but not a local file, this worked in Firefox 3, how do I resolve this.

Using either of the 4 examples shown below, to have a background image display inside about:blank worked in Firefox 3.x (using Stylish add-on), however since Firefox 4, only using the base64 encoded version of images works. Is there any way to fix this so I don't have to encode every image I wish to use? Encoding the image makes the stylish file absolutely huge, & a real pain to keep encoding whenever I want to change the image.
body:empty { background: url("resource:/res/images/OnFire.jpg")
body { background-image: url("resource:/res/images/OnFire.jpg")
body:empty { background:url("data:
body { background-image: url("data:
I've also previously disabled most of the add-ons, except for Status-4-Evar, Stylish, & Firebug, in an attempt to see if something else was interfering, but no change.
I can supply a copy of the previously working (FF 3.x) code to some of the about:blank styles if needed for testing purposes.

Type '''about:addons'''<enter> in the address bar to open the '''Add-ons Manager.'''
Hot key; '''<Control>''(Mac:<Command>)'' <Shift> A)'''
On the left side of the page, select '''Plugins.'''
Is it listed here? Select '''Disable.'''

Populate Empty DIV with Background Image

I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.

joycwang wrote:
I have a three columns page layout, a centered content column accompanied by two side columns. Those two side columns are empty. How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? You can do this effortlessly in table cell, but why is it almost making one knocking down a wall to accomplish such an easy task? BTW One of the tutorials on your website introduces a way to do it by setting a background color on the container DIV and claiming content DIV color white, thus making the sidebar bearing a background color, also at the same length as the container DIV. I can't seem to understand its logic.
I don't fully understand what you have said below?
'How do you set the background image (not color) repeating in the side empty DIVs and make them extending as long as the content column goes? '
(not color) is the bit that confuses me?
You have a background image that you want behind all 3 columns? This background image is not color? Is it an image?

Working with Background images

HI. I have a project which contains a few slides with the same background image...an image that was caught with Snagit and then merged onto the slide. I anticipate needing to replace this image with an updated one in the near future. Is there a quick and easy way of replacing that image (which contains a number of captions, highlight boxes, etc) without having to recreate the entire slide from scratch?

Hello again,
Please save the image (p.e. as a PNG) on your PC, do not copy it to the Clipboard. The workaround I described would work, but here is even a shorter way:
Open the Slide Properties (righ mouse click menu)
Use the button 'Change background image' and point to the image saved.
The background image will be replaced, you will see both of them in the Library in this case
But there will be no problem to delete the old image (right mouse click on the image in the Library)
Try it,
Lilybiri

Firefox scrolls slowly on websites with background images.

Similar Messages

Maybe you are looking for