CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
Matin Hajatdoost
Matin Hajatdoost

Reputation: 83

My 'body' css background image is jumping in chrome

I have a joomla website I'm developing. My body tag has an image background. When I reload a page or navigating to another page on Google Chrome, my main html is loaded first and then the background image of the body tag is added. So in each reloading, you see a jumping (or better say like a LED goes on and off) effect because first you see the body tag with its default background color and then the background image is added. Of course it happens very fast but I wanna solve this issue. I kow the order of loading HTML elements in a page is different on Chrome and Mozilla Firefox. So How can I solve this issue on google chrome?!

My Css:

html {
    height: 100%;
    margin-bottom: 0.01em;
}    
html, body, div.MainWrapper {
    background:url('../images/common/bg.jpg') transparent repeat-x scroll center top;
}

Upvotes: 0

Views: 606

Answers (1)

Keyur Sakaria
Keyur Sakaria

Reputation: 700

only apply to body 

body {
    background:url('../images/common/bg.jpg') transparent repeat-x scroll center top;
    background-attachment: fixed;
}

Upvotes: 1

Related Questions