www.webdeveloper.com
Results 1 to 4 of 4

Thread: Background image flickers between pages

  1. #1
    Join Date
    May 2012
    Posts
    2

    Background image flickers between pages

    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

  2. #2
    Join Date
    May 2012
    Posts
    2
    sorry the url is http://www.knocknasnans.ie

  3. #3
    Join Date
    Mar 2011
    Posts
    1,133
    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!
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Mar 2012
    Posts
    48
    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:
    Code:
    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:
    Code:
    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 */
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles