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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.