Background image flickers between pages

[Seamus_Darby]

Hi Guys,

I have a website which has a background image. I usually just set a background colour but for this project I tried a blue gradient image and I liked how it worked with the other colours and drew the attention to the center.

My issue is every time I navigate to a new page the image flickers and the blue changes to white for a milli second. I am happy with the general look of the site but this one glitch makes the site look stupid. Any advice would be greatly appreciated. The site is http://www.knocknasnana.ie

[Seamus_Darby]

sorry the url is http://www.knocknasnans.ie

[rtrethewey]

I tried both Internet Explorer and Firefox and didn't see a problem. I suspect you have a local issue on your computer. The images you're using are all pretty big. The background image is nearly 100K and you have some hefty .png images/icons as well that run over 50K. So if your browser cache is on the small side, you might be seeing some delay while your browser reloads those images from the server when you navigate from one page to the next. You could save a bunch by slicing the background image width to 3 or 4 pixels and setting the CSS for the body's background property to include "repeat-x;". Good luck!

[chryaner]

you got 2 ways to fix that problem:

1.
use this as your background : http://www.netu.co.il/help1/images/background.jpg

go to to your body properties and set it to:

body 
{
text-align: center;
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
background-color: #3CACEE;
color:#ffffff;
}

this will quickly load the background image and in case the background will load slowly, i set the background color to a kind-of-a-blue color and there wont be a flickering issue.
and in case your site's height will be longer in the future, the color will fit the bottom part of the background gradient.


2.
the second way is not using any images and draw a gradient background:

body 
{
text-align: center;
background-color: #3CACEE;
color:#ffffff;
background: #0760d6; /* Old browsers */
background: -moz-linear-gradient(top,  #0760d6 0%, #37a3ec 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0760d6), color-stop(100%,#37a3ec)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0760d6 0%,#37a3ec 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0760d6 0%,#37a3ec 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0760d6 0%,#37a3ec 100%); /* IE10+ */
background: linear-gradient(top,  #0760d6 0%,#37a3ec 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0760d6', endColorstr='#37a3ec',GradientType=0 ); /* IE6-9 */
}