Large CSS background moves on resize, in IE 8


This post is in continuation to the a solution given by webdesignerWall, regarding the use of large CSS backgrounds in your website. You can check the site below:

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

The solution he states is that of using display:table; for body tag wherein you are specifying your large background.

The solution works quite fine! But when it comes to IE 8 – unfortunately, you end up in a mess.

I have a small work around for this issue. It works totally cool in almost all the browsers.

Solution:

All you need to do is load the same image twice – one for the body, and the other for a header div container. Difference being the body will be showing the full width of 100% but the header container will show only say 1000px, of center of the image.

Have a look at the CSS to get an idea:

body {
background:url(Images/bg.png) no-repeat center top;
background-color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
width:100%;
}
#ms-container
{
background:url(Images/bg.png) no-repeat center top;
margin:0 auto;
position:relative;
width:1000px;
}

Trick here is – during resizing to higher resolution, the background keeps showing, while the center section remains steady, you get a continuous image- actually overlapping, one with 1000px centered to your screen, while the other being the big image, 100% to the body, in its full glory.

And when you resize to smaller resolution, the 1000px guy comes into play, while the body background image keeps on moving in the behind (who cares 😉 all you see is the div container, which is stationary)

Worked successfully in almost all the browsers. But do verify it.

One note:Ensure that you play with paddings, borders, positioning and any css property that can shift the div container position by a pixel or two. You dont wanna show the end user that you are loading two images. Also, site performance wud be affected a bit. Can’t help it.

Hope this solves the problem!

22 thoughts on “Large CSS background moves on resize, in IE 8

  1. Pingback: factor auto notes
  2. I read a lot of interesting content here. Probably you spend a lot of time writing, i know how to save you a lot of time,
    there is an online tool that creates unique, SEO friendly posts in minutes, just type in google – k2seotips unlimited content

  3. I read a lot of interesting posts here. Probably you
    spend a lot of time writing, i know how to save you a lot of time, there is an online tool that creates readable, google friendly posts in minutes, just type in google – laranitas free
    content source

  4. It’s hard to find your blog in google. I found it on 19
    spot, you should build quality backlinks , it will help you to
    increase traffic. I know how to help you, just search
    in google – k2 seo tricks

  5. If you would like, you are able to choose one in the
    Las Vegas hotels as the setting for your Las Vegas NV wedding
    party, reception and honeymoon. I am not only a PC player, please anyone let me to remove Dell Inspiron password…” We usually hear such inquiry around us.
    The Vi – O comes pre set most abundant in widely
    used mobile devices, including Blackberry, i – Pod, i – Phone amongst others.

  6. They disassemble the program package to its lowest form (assembly).
    The tradeoff is you will have to let torrent seed for some while before you decide to
    close it. This is most certainly not the very
    first case associated with a virus packaged
    like a particular anti-virus program, and the sad
    truth is it isn’t more likely to end up the last.

  7. background-attachment:fixed;
    in the body was the only thing that worked for me. i tried everything else, and there were a couple small problems.
    this was easier than the double background work-around, and it worked when display:table did not.
    thanks shiv!

  8. Hey,

    thanks for this tip. I was browser-testing (ick) and I came across this bug in IE8. Your fix works as advertised.

    I’ve also discovered a similar bug with background-color-ed DIVs resizing to fill the viewport, and losing their color outside of it when the scrollbars pop up! UGH IE WHYYYY

    Thanks,
    A

    1. Alex, i had faced the div background color issue in one of my projects wherein i had this big transparent div as a background for a css popup(just like lightbox). But there i captured the resize event of the browser window and then coded separately to resize my div accordingly.

      window.onresize = ResizeDiv;

      function ResizeDiv()
      {
      //change the height and width of your div according to your browsers height and width here
      }

      Hope this helps

  9. You are right. But if i am not mistaken that has a browser compatibility issue. That will not work in Chrome, Safari, FF or IE8, i guess. You can check out one of the sites that i had implemented this: http://www.americanpoliticsnow.com

    You can resize the screen to different resolutions & see the
    effect of two overlapping images.

    1. Great site! I’ve found that you can also embed a PDF by copying the PDF url in to a Page Viewer (done in SharePoint 2010). I pefrer using the Page Viewer becuase it is easier to update.

    2. I would have to agree with the OOTB in-house developers. To be safe, I’d say a lttlie more than 30 hours to provide documentation/training materials and UAT. The only thing I’d throw caution in the wind about would be for maybe a loss of fidelity in the look & feel but overall it sounds like most of what you’re looking for can be thrown together using look-up tables, filters/views, site columns and permission assignments. Best of luck!

    3. Hi, thanks for the screenshot, i got a question , im not able to get the My sites with default screenshot you have,, In ex: the news feed share message is not there…It also take more than 10 minutes to create the community site? Any idea? It’s the second time im recreating site collection , user profile have imported correctly but my site still keeping saying that it’s not ready Your My Site experience is on its way!We’re in the middle of getting your brand new My Site experience set up.It may take a little while, but in the meantime you can edit your profile or change your photo.Check to see whether things are up-and-running.

  10. I had tested this on fiddler. The http request it makes is just one. But the rendering of two images is the catch here.

    I would recommend you to avoid this trick if your end-users still rely on a 56kbps modem.Logically speaking, under such cases, you can use the display: table, as most of them would not event have IE8 in their machines 🙂

    1. Hi,The right sidebar is tinchoug the middle column in the homepage as you can see. I want to change the size same like left sidebar, not tinchoug the middle column.Thanks for reply.

    2. Came across your site after hvanig been told that my estimate of hours for developing an Intranet SharePoint solution for Petty Cash was way overblown (minimum of 200 hours). I did not use an Agile methodogy and must confess that my knowledge of SharePoint is quite limited, but knowing that the Director wanted several layers of Automation including look-ups for Dept, Employee, GL accounts from GP, Cyber Signatures and email notifications, I added additional time for UAT reworks and documentation. OOTB in-house developers believe it can be done in a matter of about 30 hours! Am I that far off in estimations of SharePoint solution development?

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s