Background image positioning

[bkoopers]

I am using the following CSS style code to position a background image in a div window:

div#midwindow {
background: url(backgrounds\back_news_dim.jpg);
background-position: 0px 0px;
background-repeat: no-repeat;
background-attachment: fixed;
}

Here is a sample webpage:

http://lourds.com/newsx.htm

When viewed with Internet Explorer v6, the background image is positioned perfectly in the div window. With Internet Explorer v6, the image is shifted about a third of the way to the left. With Firefox v2, Netscape v7.2, and Opera v7.52, the background image is not displayed at all.

What code can I use to display and position the background image in a div window in the same position for all these web browsers (or at least IE v6 and v7 and Firefox)?

Thanks to anyone who can help me out.

 

[bkoopers]

I meant to say: With Internet Explorer v7, the image is shifted about a third of the way to the left.

 

[Rieekan]

The code is incorrect.

div#midwindow {
      background[COLOR=red]-image[/color]: url(backgrounds\back_news_dim.jpg);
      background-position: 0px 0px;
      background-repeat: no-repeat;
      background-attachment: fixed;
}

or a shortened version to save size:

div#midwindow {
      background: url(backgrounds\back_news_dim.jpg) 0px 0px      no-repeat fixed;
}

- George

 

[traingamer]

First, give your document a full and valid doctype.

If that doesn't do the trick, try:

    background-position: center;

?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[bkoopers]

What code line should I insert for the doctype?

I received some advice in another forum and changed the code to this:

div#midwindow {
background: url(backgrounds/back_news_dim.jpg) no-repeat center top;
}

Now the image is correct (fixed in placed, positioned correctly and does not scroll with the div scroll) with Firefox, Netscape and Opera. With IE6 and IE7, it is positioned correctly, but it scrolls up and disappears as the div window is scrolled. I was told that IE6 and IE7 are at fault and there is no workaround.

Does everybody in this forum agree or is there another method that will make the image fixed in the same div window position and will not scroll?

 

[bkoopers]

I changed the code to this:

div#midwindow {
background: url(backgrounds/back_news_dim.jpg) no-repeat fixed 240px 10px;
}

Now it works (fixed, no scrolling when div window scrolls) in IE7, Firefox, Netscape and Opera. In IE6, the image is shifted about 50% too far to the right.

Actually, I also had to position the image an extra 20 pixels to the right. At 220 pixels, IE7 placed the right edge of the image flush with the scroll bar. The other browsers had the image 20 pixels to the left (leaving a black vertical section). Since the image is wider than the div window, I was able to shift it to the right and have it still look OK in IE7.

Eventually, all IE6 users will upgrade to IE7 but that might take years. In the mean time, since I got this far, can anybody think of a workaround to get IE6 to position the image correctly?

 

[Vragabond]

IE6 (don't know how it is with 7) incorrectly interpreted the fixed property. According to standards, fixed fixes the background to the viewport. That is, the browser window. Thus an image that is positioned at 0 0 will lie at the top left corner of the viewport and not of the current element. If your element is somewhere else on the page, you will need to put the correct offset to make your image appear behind that element. That should give you an indication how to position the image for all standards-compliant browsers.

To deal with non-compliant, you should go the route of hacks and/or IE conditional comments. With the latter you can create specific IE6 and IE7 stylesheets (or just the amendments to the main stylesheet) and have them loaded only in the browser that needs them. It is some additional work, but should pay off.

 

[bkoopers]

Vragabond:

Thanks. What conditional code can I use (or where can I find info on code like that) that will check for IE6 and use one code line for IE6 and a different code line for all other browsers?

 

[Vragabond]

Google is your friend. IE conditional comments.

 

[bkoopers]

I used this conditional code and it works with IE6, IE7, FF, NS and Opera (background image is positioned correctly in div window and stays fixed, does not scroll, when div is scrolled):

div#midwindow {
background: url(backgrounds/back_news_dim.jpg) no-repeat fixed 240px 10px;
<!--[if IE 6]>
background: url(backgrounds/back_news_dim.jpg) no-repeat 0 0;
<![endif]-->
}

The second background code line overrides the first background code line only with IE6.

http://lourds.com/newsx.htm

Thanks to Vragabond for the tip about the "IE conditional comments" lead me to this solution to my problem.

 

[bkoopers]

I am dismayed to have to retract my solution. I don't understand what happened. I tried it in IE6 several times and refreshed the browser screen and reloaded the paged and it worked repeatedly but now it is no longer working in IE6. The conditional background image code line is now ignored in IE6 so it uses the previous line that only works in all other browsers.

I can only think that somehow a cached version was being used until it eventually gets refereshed. Since my home computer has IE7, I am using a VPN to remotely connect to my office computer which has IE6 to test the code in IE6. Perhaps my office server is caching webpages and does not immediately refresh.

In any case, I am asking for help again. Can anyone tell me what I need to do get the conditional code to use one line for IE6 and the other for all other browsers?

div#midwindow {
background: url(backgrounds/back_news_dim.jpg) no-repeat fixed 240px 10px;
<!--[if IE 6]>
background: url(backgrounds/back_news_dim.jpg) no-repeat 0 0;
<![endif]-->
}

Is there an "If-Then-Else" conditional command that can issue one code for IE6 and another code for everything else?

 

[Vragabond]

I have not read the article in detail but given the structure (they are html comments) and examples on the page, I thought it was clear that IE conditional comments are an html construct not a css one. What you can do is create a separate stylesheet with all the corrections for IE6 and then load that stylesheet only in IE6. Or IE pre 7. Anyway, something like:

<!--[if IE 6]>
  <link rel="stylesheet" href="styleIE6.css" type="text/css" />
<![endif]-->

Put all the proprietary IE6 styling in there and you win.

You need to learn that html and css are two different languages and you cannot mix and match methods that work in one with the other.

 

[bkoopers]

Vragabond:

Thanks. Your suggestion worked.

I placed the code needed for IE6 in a CSS code file and then placed this code to load that file right before the "</head>" code line (so the code will override the previous code that all other browsers need):

<!--[if IE 6]>
<link rel="stylesheet" href="stylesIE6.css" type="text/css" />
<![endif]-->

The code in "stylesIE6.css" is just this:

div#midwindow {
background: url(backgrounds/back_news_dim.jpg) no-repeat fixed 0 0;
}

I placed this new code on a "newsxx" webpage page:

http://lourds.com/newsxx.htm

The "newsxx" page looks OK to me now in IE6, IE7, FF, NS and Opera. I would appreciate it if some other people that have access to theses various web browsers (or at least IE6 and IE7) to post a reply letting me know if the background image completely covers the div window and that when you scroll the text in the div window, that the background image stays fixed in place (does not scroll up and disappear). Please tell me the web browser and the screen resolution you used when you checked the "newsxx" page.

Now I have a new complication:

Two days ago, I changed my computer display from a Dell 1905FP flat panel using a 1280x1024 screen resolution to a Dell 2407WFP wide-screen flat panel using a 1200x1920 screen resolution. With the 1905FP at 1280x1024 with IE7, the new code at "newsxx" looked correct. When viewing the "newsxx" page at this higher resolution, when I maximize the webpage window, the background image is shifted to the left about an 1/8 of the way (so there is a black area in the background 1/8 of the way against the scroll bar. The rest of the webpage looks the same. Only the background image placement is affected by the higher screen resolution. If I size the window down to about 2/3's of the screen size, then the background image placement is good. If I make the window bigger, the image starts to shift to the left. On my IE6 computer (with uses a 1905FP at 1280x1024), it looks correct and I lowered the resolution there to 1024x768 and it still looks correct.

What can be done so the background image placement remains relative to the div window regardless of the screen resolution and web browser window size?

On a different topic: Is there a way to have both IE6 and IE7 installed on the same computer? I see now that it is necessary to test all webpages in both versions since they respond the the same web code differently. I will post this question it in a Windows forum but I thought other web designers may already know the answer.

 

[Vragabond]

Yes on multiple IE versions. See

http://tredosoft.com/Multiple_IE

Maybe on the background image. With the technique you're using, the background image is locked to the viewport and not the actual window. You would need to lock the image to center (the same way your page is) instead to 240px off the left edge. Try the center and hope it works.

Incidentally, it would look ok in IE6 because IE6 incorrectly locks the image to the container rather than the viewport.