CODEWITHSUNDEEP
cssgoogle-chromecss-position
gokartracer101
gokartracer101

Reputation: 45

Chrome CSS position:fixed

I'm losing hair over this one! I have a fullscreen background image that displays correctly (ie. FIXED) in firefox, but in Chrome it only displays correctly if there is no scroll bar?! And the longer the page is, the background image displays larger, and on a really long page the background image is huge... I've searched on this topic and found absolutely specific fixes, but nothing that relates directly to my situation, how can I make Chrome behave?

The code: 

<div id="background">
<img src="../images/37df8ead08594126a7be43e1bdf3cd00.jpg" alt="blah" class="main-bg" />
</div>

#background {
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
z-index: -1;
}

.main-bg{
position:absolute;
top:0;
left:0;
z-index:1;
width:100%;
}

Any help would be greatly appreciated!!

Upvotes: 1

Views: 1184

Answers (2)

Chandru velan
Chandru velan

Reputation: 146

this is could help you to fix Chrome

for eg:Chrome fix.

  @media screen and (-webkit-min-device-pixel-ratio:0){
              .CR_page_TD p { line-height:24px}//sample class
              .cr_Rightimgdiv {float:left}//sample class
               background-attachment:fixed//not tested yet 

}

in that make changes the class which you want to write specifically to chrome dont worry it wont affect other browsers, you can add any number of class in this block specific to the Webkit browsers

Upvotes: 0

jshbrmn
jshbrmn

Reputation: 1787

I'm not entirely sure if this is the case, but do you want the background image to stay static (while you scroll down or up the image appears to 'move' with your scrolling, never stretching or repeating)?

If that is the case, try background-attachment:fixed and take a look at this link.

If this isn't the case, what exactly do you want to achieve with the background image?

Upvotes: 2

Related Questions