Jump to content
Sign in to follow this  
missyjknox

Background Color Flickers Before Loading Background Image

Recommended Posts

missyjknox

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( concept4.png); background-position:center} Any suggestions on correcting this?

Share this post


Link to post
Share on other sites
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

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.

Share this post


Link to post
Share on other sites
catrina

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?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
missyjknox

I notice it on my PC in IE.

Share this post


Link to post
Share on other sites
Kate

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).

Share this post


Link to post
Share on other sites
missyjknox

Hi Kate, This is the code I used and it's still happening: body.page-id-1477 #page-canvas { background-color:#ff6501; background:url( 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?

Share this post


Link to post
Share on other sites
Kate

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;}

Share this post


Link to post
Share on other sites
missyjknox

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×