Home/ Questions/Q 6800879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T19:01:31+00:00

I’ve got an image that I’m scaling to act as a background with another

  • 0

I’ve got an image that I’m scaling to act as a background with another image in a div absolutely positioned over it, as such:

<div class="item">
    <img class="item_frame" src="...">
    <div class="item_contents">
        <img src="...">
    </div>
</div>

Jsfiddles :

In webkit broswers I’m seeing very funky rendering where the background image is offset and seems to float outside it’s parent container. If I right click to inspect the element, the browser comes to and redraws the elements appropriately.

  • Win64 Firefox 3.6.3 is buggy
  • Win64 Chrome 15.x is buggy
  • Win64 IE9 … actually is the only browser that displays it correctly

The markup here is pretty hacky anyway to accommodate dynamic image loading/resizing/cropping so I’ve got a few ideas on other ways to work around this I can try.

Am I missing something or is this a webkit bug?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure if this is a bug; but you can try adding left and top values to the .item_frame css style to fix it:

    .item_frame {
    top: 0;
    left: 0;
}

    Updated CSS Fiddle: http://jsfiddle.net/h7Tqa/7/

    Updated jQuery Fiddle: http://jsfiddle.net/h7Tqa/8/

    I hope this helps!

    • 0