Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

opera 7 what changed

background image problems



6:14 pm on May 7, 2003 (gmt 0)

10+ Year Member

Background image not aliened in opera 7
My background is made to align perfectly with other page elements it tested o.k. in opera 4 so I thought it must then work in version 7 but I won’t. I am using CSS to call the background witch shouldn’t make a difference but I tried defining it in the <body> no luck. What’s going on HELP!


6:43 pm on May 7, 2003 (gmt 0)

10+ Year Member

There is a bug in Opera 7 which has existed since the first betas and is still there in the latest version. You problem may be related to this: what happens is that if you place the BG image at the bottom of the body element, and the page is long enough to create a vertical scrollbar, Op7 throws a wobbly and usually manages to display the image in the wrong place, often mostly outside the viewing area.

There is no real workaround for the bug that I can think of, unless you hack something up with divs and place the BG image in a div rather than on the body element.

The bug wasn't there in Opera 6.


6:53 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Interesting bug - I use O7 as my default and haven't run across it, but I'll keep my eyes open.

Aligning a body background image to the page elements with pixel perfect precision is often a gamble, cross-browser. It doesn't matter whether you call the background image with CSS or use the old-school <body> tag method.

It's the page itself that can shift, not the background image. Problems can come from the default margins and padding which various browsers assign to the block level elements. Unless you are meticulous at defining all these rules, surprises can creep in.

Also, depending on the layout, variations in a browser's font rendering can push various elements a few pixels one way or another.

That said, I'm not aware of a change in these areas for Opera 7. But I didn't get serious about designing for Opera until version 6. To resolve this problem, I think you may need to need to pull your layout apart to find where the problems get generated.


7:11 pm on May 7, 2003 (gmt 0)

10+ Year Member

SOLVED! Opera doesn't handle background images in CSS. Even though page margins are set to "0" in CSS opera won't play ball so in addition to the CSS I also declared BG image and page margins in the <body> statement and it worked.


7:22 pm on May 7, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Are you saying that the problem is that Opera 7 doesn't handle the rule properly if it's in an external stylesheet? Wow, that's a new one on me.

Could we see some snippets for what did and didn't work?


7:34 pm on May 7, 2003 (gmt 0)

10+ Year Member

Original CSS Body declaration:

body {
BACKGROUND-IMAGE: url(images/ns_background.gif);
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;

I also added the same info to my <body> tag:

<body background="images/top_set.jpg" leftmargin="0" topmargin="0">

And after that Opera rendered the page just fine. I may be wrong but such a simple fix tells me that opera was fumbling with correctly interpreting the CSS body element.


8:08 pm on May 7, 2003 (gmt 0)

10+ Year Member

The bug is a positioning bug - Opera 7 reacts badly to background images on the body tag when the image is not fixed. Tedster, I've got a very basic test page that I can send you by sticky mail if you want, but try this CSS on a page, then put in enough text to make the page scroll:

body {
border:2px solid red;
padding:5px 100px;
background:url(name_of_image.gif) no-repeat bottom right;

The red border will show the edges of the body element - the image should be within this zone, but in Op7, the image creeps outside.


Featured Threads

Hot Threads This Week

Hot Threads This Month