Background Image Problems

According to the CSS1 Spec, Section 5.3.6, if an element has a background image, a background position of 100% 0% places the upper right corner of the background image in the upper right corner of the content edge of the element, not the border edge. (According to the CSS2 spec, which Opera does not claim to implement, section 14.2.1, background-position specifies the position of a background image relative to the padding edge of a box, and tiling should cover only the content and padding areas of a box. This makes more sense than CSS1.)

This page contains the following stylesheet:

DIV.demo  {
  width: 100px; height: 100px; margin: 5px; padding: 0;
  background: #222222 url(logo.jpg) 100% 0% no-repeat; }
DIV.a  { border: 0px solid red; }
DIV.b  { border: 20px dotted red; }
DIV.c  { border: none;  width: 20px ! important; height: 20px ! important; }

Below this paragraph there are three DIVs with class demo and with classes a, b, and c, respectively. Each contains just one   entity (to get around another bug in Opera, that empty elements get collapsed even though only empty P elements should).

Example A

Each of the DIVs should contain an image (of a samurai logo over top of a background that is white in the upper right half and gray in the lower left half) in its upper right corner, with the rest of the DIV filled with a dark gray background. In all three of the DIVs, the leftmost 1 pixel column of the samurai logo gets added to the right edge, outside the border, and the topmost row is added to the bottom.

Example B

Here, the whole DIV should be surrounded by a red dotted border, 20px wide. The image should not be partially underneath the border. (According to CSS2, the background color should be.)

Example C

Here, only the upper right part of the image should show since the DIV is smaller than the image. The bottom and left parts of the image should be clipped.