Background image not centered in IE

  • i am doing work for a site and the background image does not center in ie. Works great in firefox. Any suggestions for the CSS fix. Is it a body issue or a wrapper issue?

    Thank you for any help.

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter porscheguy

    (@porscheguy)

    i think it must be the container of the background image, which is?

    Thread Starter porscheguy

    (@porscheguy)

    look at the page at obamamortgageplan dot us (.us)

    Thread Starter porscheguy

    (@porscheguy)

    I have the CSS property set to center top in the body CSS property

    still not working though.

    Thread Starter porscheguy

    (@porscheguy)

    I will send anyone good karma who figures this out. I know it’s simple! Thx

    Thread Starter porscheguy

    (@porscheguy)

    I have iefix.htc in my server to which i thought was a fix for that there must be a CSS hack for it

    Thread Starter porscheguy

    (@porscheguy)

    ARE YOU NOT ENTERTAINED?

    I’m seriously losing it over this problem : (

    Thread Starter porscheguy

    (@porscheguy)

    I think* this is what I need to do

    anyways the only trick I know to get it spot on in all browsers is to nest an extra wrapper the same width as content (or width of image if there’s an overlap effect) and center it using the margin: 0 auto method too, put the repeating image as background to bgwrap.

    <body>
    <div id=”bgwrap”>
    <div id=”contentwrap”>

    Have you tried IE conditional tags? But get the site valid first. A lot of the reason it doesn’t validate is that your elements should not be uppercase. These shouldn’t be critical, but are easy to fix. However, there are some problems with unclosed tags that could cause layout trouble.

    Thread Starter porscheguy

    (@porscheguy)

    site is valid now. Thanks. Still need a solution for this. It’s not ie conditional tags; although, that may work. What I need to do is wrap everything in a new viv the same width as my background

    like this” anyways the only trick I know to get it spot on in all browsers is to nest an extra wrapper the same width as content (or width of image if there’s an overlap effect) and center it using the margin: 0 auto method too, put the repeating image as background to bgwrap.

    <body>
    <div id=”bgwrap”>
    <div id=”contentwrap”>

    I just am not sure where to put the new div (index.php) or where to put the div style on the stylesheet

    I’m not sure why you can’t do somthing like this– background: #01245C url(images/bodybg.jpg) no-repeat scroll 50% 0— which will center the image just as it is now. Then use <!--[if lte IE 7]><style type="text/css">background-position: 60% 0</style><![endif]--> to make IE behave, adjusting the percentage value as needed of course. In other words– and I guess I’m just curious– why won’t conditional tags work? Do you just not like them?

    Thread Starter porscheguy

    (@porscheguy)

    Applied conditional tag and it made the background center; however, it pushes my sidebar to the left. If I eliminate the ie7 conditional tag it fixes the sidebar. Any thoughts?

    By the way. you are the man!

    Thread Starter porscheguy

    (@porscheguy)

    another conditional tag for ie? lol

    Changing the background images frells the sidebar. Wow. Gotta love IE.

    Possibly increase the width for div id="content-wrapper" for IE.

    Also, you’ve got what looks like very odd css to me. This, for example:

    .more-link, .navigation a{display: none;}
  display: inline-block;
  padding: 3px 12px;
  border: solid 1px #C5C5C3;
  background: #8295A3;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

    You have one open curly brace and two closing braces. Is that on purpose? Some kind of browser hack or something? I haven’t seen it.

    Not sure I read everything, so I may be repeating what someone already said, or missing the point altogether, but what it sounds like you need is the following:

    #wrapper {
	width: 900px;
	height: 900px;
	margin-top: 0;
	margin-left:  auto;
	margin-right: auto;
	background: url(images/bg.jpg);
}

    Basically use a wrapper and auto align the “margin” left and right. Make sure you specify the image height and width.

    Hope this helps,

    -Joe

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Background image not centered in IE’ is closed to new replies.