SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Site Check. Flash of layered background image

    Any ideas how to suppress the flash of blue background image across the header? It happens when you click through page to page.

    http://plasticmailboxes.net/

    Code:
    //CSS
    html {padding:0;margin:0;font-size:90%;}
    body {margin:0; padding:5px 0 0 0; font-family:Calibri, Arial, sans-serif; font-size:1em; color:#333;background:url(header.gif) repeat-x;background:url(header.gif) repeat-x, url(spot2.gif) repeat-x;position:relative;}
    a {color:#706f6f;text-decoration:none; }
    .entry a, #menuFooterRecent a {color:#5e9cdb;}
    h1 {font-size:220%;} h2 {font-size:170%;} h3 {font-size:140%;} h4 {font-size:140%;} h5 {font-size:100%;} h6 {font-size:75%;}
    
    /* main structure */
    .header {color:#ddd; margin:35px auto 0 auto; text-align:center; padding:0; width:100%; height:100px;}
    .siteTitle a, .tagline {color:#555; width:820px; margin:0 auto; text-align:left;}
    .siteTitle {background:url(sidebar.gif); margin:0 auto;}
    .siteTitle a {color:#fff; padding:37px 0 0 260px; display:block; position:relative; z-index:6; height:63px; font-size:1.75em;}
    .siteTitle {height:35px;}
    .tagline {text-indent:200px; font-size:1.45em; margin:-35px auto 0 auto; height:100%; padding:0 30px 0 0;line-height:160px; background: url(header.png) left bottom no-repeat;width:930px;overflow:hidden;}
    *+html .tagline{line-height:100px;}
    
    .main {margin:0 auto 0 auto; text-align:left; width:950px; background:url(main_bg.png); padding:0;-moz-box-shadow:0px 10px 20px #ccc;box-shadow:0px 20px 20px #ccc;-moz-border-radius:12px 12px 0 0;border-radius:12px 12px 0 0;}
    .main a img {border:none;}
    
    .wrapper {background:url(background.png) 0 120px repeat-x fixed, url(background2.png) 0 40px repeat-x;}
    .content {float:left;width:610px; padding:0 20px; margin:0; min-height:475px;overflow:hidden !important;}

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I didn't see the flash in Firefox but I noticed it in IE the first time you go to a new page.

    The problem is that you are painting an image on the body and then painting an image on an inner wrapper that has a transparent overlay to modify the appearance of the body background. While that's a useful technique it does mean that both images have to be drawn and there will obviously be some delay especially with fixed backgrounds taking more effort to render than normal backgrounds.

    A solution would be to combine both those images on the body to start with as a single composite image rather than having two images to create the effect. Of course you lose the flexibility of adding different transparent overlays.


Bookmarks

Posting Permissions

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