background flickering

[kiwidesign]

Hi all,

I have a background that is a gif 50px by 50px i have added it to my style sheet as follows
body {
background-image:url(images/bg.gif);
background-position:top;
background-repeat:repeat;
}

when i view it in a browser it flicks when you scroll down.

Is there anyway I can fix this problem?

Regards,
Kiwidesign

[coopersita]

What is the background like? What happens if you take out the background position and repeat?

[kiwidesign]

Hi
the background is blue and black stripes very thin lines.

If i take out the position and repeat it still flicks.

Kiwidesign

[Vhadakhan]

hmm, try making the background dimensions divisable by the repeated background. IE: background width of 900px, with a 100px wide repeating background image.

[doodlebee]

I'm guessing both of you are viewing in IE?

IE has this thing where it doesn't cache background images - it loads them every time it's brought up, which will cause a flicker. There's a couple of ways around this:

1) Add this meta tag to the head of your document -

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

IE has some kind of :fade in/fade out option for its browsers, and this put it in place and apparently gets rid of the image background flicker.

2) Also, if you have your "background-position" set, sometimes removing that line completely will get rid of the flicker, as well. For some reason, IE doesn't like this line of code.

HTH!

[doodlebee]

By the way - I just noticed your syntax is incorrect...

body {
background-image:url(images/bg.gif);
background-position:top;
background-repeat:repeat;
}

Try changin it to this:

body {
background-image:url("images/bg.gif");
}

No need to add the background-position, as it defaults to top left (and by the way, when you *do* use backgournd position, you *need* to have both specifications in there - just "top" won't cut it.) - *and* it defaults to repeat (another error - as it's either "background-repeat:no-repeat ¦ repeat-x ¦ repeat-y" there is no attribute "repeat").

Also, leaving out the "" around the URL isn't a good thing to do.

But anothe rbig help to assist in figuring out the issue would be for you to post your code. Might be that something else is conflicting with your styles - and right now, we're all just guessing at what might fix it. If *nothing* is working, then we need to see your code.

[saucey]

Try changin it to this:

body {
background-image:url("images/bg.gif");
}

Doodlebee, I'm curious about your "syntax being incorrect" comment. I was under the impression that the way kiwi had it was correct. And W3 has the following as their background-image example.

BODY { background-image: url(marble.gif) }

Am I just misunderstanding your comment? Or am I misunderstanding W3? :)

Marfissa, if you put your code back the way you had it and then added the following,

* html #your-id-name-here { 
 height:1% 
 } 

Does that fix the problem? I know you've fixed your problem. :) I was just curious.

[kiwidesign]

Hi all,

Thanks for all the ideas

The flickering stopped when i followed doodlebees advice and added the line
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

This was my final css for the background
body{
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
background-image:url(images/bg.gif);
}

Again, many thanks for all the helpful tips.

Kiwidesign

[Setek]

Am I just misunderstanding your comment? Or am I misunderstanding W3? :)

Saucey, you're both right... In external stylesheets, encapsulation is not required. However, inline styles/embedded styles still require encapsulation.