How we solved the IE 11 fixed background position bug

Hi, I have an Html code for that I have used Bootstrap. I have one image on top and I decided to a fixed position of that one.

But when I'm using Position: Fixed then image size increased and looks very ugly on screen. This thing is happening in IE 11 only. I check other browsers where things working properly.

Is there any Solution to solve the IE 11 fixed background position bug?
SudhanshumAsked:
Who is Participating?
 
Snarf0001Commented:
Can you post screenshots and code?  It's hard to actually tell what your actual problem is.

But when I'm using Position: Fixed then image size increased and looks very ugly on screen.

Is the source image larger than how you want it to show on screen?  Or is it natively a small image?
By looks ugly, do you mean it's pixelated, or that the layout looks bad?

You're only setting the max-width, so based on what you have attached, the image shouldn't be growing, just shrinking.
You're also not really specifying a width on the position:fixed, so there's only so much control it will have.

More full code and screenshots of what it looks like for you in IE11 vs Chrome for example.
0
 
Vijaya KumarCommented:
share your html code or screen shot... it will help us.
0
 
mohan singhWeb developerCommented:
Please try below css code

Try using position: expression(fixed);

Try using position: relative; on the parent element and position: absolute; on your caption. This is cross-browser.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
SudhanshumAuthor Commented:
Hi @Mohan,

i had already tried your solution but its not working on IE11.

This property "expression(fixed)" is also not a part of the position.

If you have other solution then suggest, please.
0
 
SudhanshumAuthor Commented:
Hi Vijay,
 
Below is the CSS that i'm using:

 .works_pr2
        {        
            margin: 220px 10px 0 10px;          
            position:fixed ;                
           
        }
--------------------------------------------
and here is the div where i'm using that CSS :(you can also see image in that)

 <div id="Div3" runat="Server" class="works_pr2">                    
                        <asp:ImageButton ID="imgBut" runat="server" Style="max-width: 100%; display: block;
                            margin: 0 auto auto 0;" ImageUrl="~/Images/vid_Imagebutton.png" OnClientClick="return ShowModalPopup();" />                        
                    </div>

--------------------------------------

Note that this is working properly on almost every browser except IE11.
0
 
Vijaya KumarCommented:
Specify margin in % like

 .works_pr2
        {        
            margin: 22% 1%px 0 1%;          
            position:fixed ;                
        }

and  <asp:ImageButton ID="imgBut" runat="server" Style="max-width: 100%; max-height: 100%;display: block;position: absolute;
                            margin: 0 auto auto 0;" ImageUrl="~/Images/vid_Imagebutton.png" OnClientClick="return ShowModalPopup();" />
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.