Jump to content


Photo

Background Color Flickers Before Loading Background Image


  • Please log in to reply
8 replies to this topic

#1 missyjknox

missyjknox

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts

Posted 23 July 2011 - 01:45 PM

Hello, As my website loads, there is a flicker of black shown before the background image loads. This is the CSS used to place the image: body.page-id-1477 #page-canvas {background:url(http://acedoubleyou....07/concept4.png); background-position:center} Any suggestions on correcting this?

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 23 July 2011 - 05:18 PM

The background color set in Design Control is probably black. You can change that background color to the shade of orange you're using in the background so that the black disappears. If there is any black used in any code for the background, it might also help to change that color to orange, too.

#3 missyjknox

missyjknox

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts

Posted 23 July 2011 - 07:52 PM

All pages, besides the splash page are black. I used Design Control to accomplish this for all pages except the Home page. I'm sorry, I don't understand your resolution for I want said pages to be black.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 July 2011 - 03:50 PM

I was thinking that the black flickers would be coming from somewhere, but I didn't know you wanted the background color to be black in your other pages. If you view your site in other browsers, does the background still flicker before loading the background image?

#5 missyjknox

missyjknox

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts

Posted 24 July 2011 - 07:19 PM

I notice it on my PC in IE.

#6 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 25 July 2011 - 02:34 PM

What you could try is adding the important declaration, along with the orange color. Something like this:
 body.page-id-1477 #page-canvas {background:orange url(http://acedoubleyou.com/wp-content/uploads/2011/07/concept4.png) no-repeat center center;}

Note the "orange"... please replace that with the shade you actually used (in hex format).

#7 missyjknox

missyjknox

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts

Posted 27 July 2011 - 11:16 PM

Hi Kate, This is the code I used and it's still happening: body.page-id-1477 #page-canvas { background-color:#ff6501; background:url(http://acedoubleyou....07/concept4.png); background-position:center} Did I miss something? Somehow PlatformPro is reading the color set in Design Control before it loads the background image for the home page. Should I upload the home page background image using HTML oppose to CSS?

#8 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 02 August 2011 - 02:45 PM

Well, if you could try what I posted that would be better ;) Here's a modified version:
 body.page-id-1477 #page-canvas {background:#ff6501 url('http://acedoubleyou.com/wp-content/uploads/2011/07/concept4.png') center center !important;}


#9 missyjknox

missyjknox

    Advanced Member

  • Members
  • PipPipPip
  • 89 posts

Posted 08 August 2011 - 06:41 PM

Thanks Kate, sorry for the delay in responding. Monday is the only day I can address theme vanity issues as this. Your fix worked in a sense that black no longer flickers before the background image loads, but the background color does, which is better.