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.
-
i think it must be the container of the background image, which is?
look at the page at obamamortgageplan dot us (.us)
I have the CSS property set to center top in the body CSS property
still not working though.
I will send anyone good karma who figures this out. I know it’s simple! Thx
I have iefix.htc in my server to which i thought was a fix for that there must be a CSS hack for it
ARE YOU NOT ENTERTAINED?
I’m seriously losing it over this problem : (
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.
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?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!
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
The topic ‘Background image not centered in IE’ is closed to new replies.