How to remove the color flash from the Genesis Agency Pro Theme

genesis agency pro background flash color

I’ve recently started playing with the Genesis Framework and I must say it is pretty impressive, flexible, and confusing all at the same time. I hope the confusion fades away as I get more comfortable.

Anyways, I recently installed the Agency Pro theme for a client. The theme is great, except of the color flash that happens with the background image.

I found several topics in the forums discussing the fix and most pointed to this post (now a paid blog). However, it was wasn’t addressing the problem. It was removing the fading in of the background image, but not removing the flash of the color. Since the above link is now a paid blog, you can read my post about how to remove the fade in.

The fix is to change the background color to black or white before the image loads. That will make it a “blank” area before the image fills in.

So in your Agency Pro CSS, look for something like body.agency-pro-orange (we’re using the orange theme) then change the background-color to #fff for a white background.

Before

body.agency-pro-orange {
  background-color: #f07802;
}

After

body.agency-pro-orange {
  background-color: #fff;
}

I’ve left the fade in and it works beautifully now.

Hope this helps someone else out.

Leave a Reply

Your email address will not be published. Required fields are marked *