Background position bottom

[fredrikhaglund]

Version: 1.8.13

In the case you have a background image aligned to the bottom of a div-tag with dynamic height, RequestReduce fails to position the image at the bottom.

This pattern is often used to get a drop shadow or bottom in place for a box with dynamic height.

Steps:

• Create two images where a.png has 50 pixel hieght and b.png with 25 pixel height.
• Create test.aspx
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula, dolor vel condimentum laoreet, diam mauris accumsan sem, et convallis tellus metus nec diam. Donec rhoncus luctus nisi, id venenatis sem interdum nec. Mauris eget ante lacus. Mauris facilisis vestibulum euismod. Integer malesuada dapibus enim sed ultricies. Aliquam ac dolor et magna porta lacinia at ac lorem. Sed tristique lacinia massa eu egestas. Donec nibh nibh, semper scelerisque mattis non, posuere non ipsum. Ut ac lectus vel enim convallis volutpat. Nullam gravida sollicitudin nisl non pharetra. Nulla elementum mi quis dolor congue ut volutpat ante aliquet. Pellentesque libero sem, lacinia vel accumsan eu, rhoncus in nulla. Sed facilisis mauris ac magna viverra vestibulum.

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula, dolor vel condimentum laoreet, diam mauris accumsan sem, et convallis tellus metus nec diam. Donec rhoncus luctus nisi, id venenatis sem interdum nec. Mauris eget ante lacus. Mauris facilisis vestibulum euismod. Integer malesuada dapibus enim sed ultricies. Aliquam ac dolor et magna porta lacinia at ac lorem. Sed tristique lacinia massa eu egestas. Donec nibh nibh, semper scelerisque mattis non, posuere non ipsum. Ut ac lectus vel enim convallis volutpat. Nullam gravida sollicitudin nisl non pharetra. Nulla elementum mi quis dolor congue ut volutpat ante aliquet. Pellentesque libero sem, lacinia vel accumsan eu, rhoncus in nulla. Sed facilisis mauris ac magna viverra vestibulum.
• Create style.css .column { width: 250px; }

.box-a { background: url(a.png) no-repeat 0 100% transparent; width: 250px; border: solid 1px black; }

.box-b { background: url(b.png) no-repeat 0 100% transparent; width: 250px; border: solid 1px black; }

Expected behavior: -Both images should align to the bottom of the sprite -The generated background-position should be "-0 bottom" respectively "-251px bottom"

Actual behavior: -Both images should align to the top of the sprite image -The generated background-position should be "-0 0" respectively "-251px 0"

[mwrock]

Thanks for reporting this Fredrik! If the containing Div have explicit heights then the vertical positioning was working but in the case where no explicit height is set as in your examples, RR resets the background image offset to 0 which results in the problem you observe. I now preserve the original offset if no containing height is provided. This will be available in the next release due in the next week.

[fredrikhaglund]

And thank you for creating and sharing RR!

Any chance you can make this patch available soon?

/Fredrik

28 apr 2012 kl. 15:57 skrev Matt Wrock reply@reply.github.com:

Thanks for reporting this Fredrik! If the containing Div have explicit heights then the vertical positioning was working but in the case where no explicit height is set as in your examples, RR resets the background image offset to 0 which results in the problem you observe. I now preserve the original offset if no containing height is provided. This will be available in the next release due in the next week.

---

Reply to this email directly or view it on GitHub: https://github.com/mwrock/RequestReduce/issues/173#issuecomment-5396919

[mwrock]

Hi Fredrik. Its available in the current release. It was deployed a few weeks ago. Let me know if you still have problems with it.