After re-reading my post, I feel like additional clarity is needed.
As an example, if i have a png for my background that is 800X600, It should fit perfectly in a 800X600 window. Then, if I shrink the window down horizontally, the image should shrink down as well, but maintain a 4:3 aspect ratio, leaving empty space at the top and bottom.
My problem is: I do not know how to manually control the width and height of the background image. the backgroundsize style seems to scale uniformly with width AND height, so I cannot control them individually.
1 person found this helpful
One way is to not use backgroundImage at all, and put a Canvas as the top
level component, place an Image in it, then whatever container you were
using on top of it.
thank you, but we've been trying to avoid that solution. That might require some reworking of some of the drag-and-drop functionality in our program, and would require more logic in some of our layering techniques (we move objects to the top/bottom of the application a lot, and the image would overlap our other modules). Is there simply no way to manually control the width and height of the background image?
I don't see any aspect ratio preservation code in the border/background
code, so you'd have to write your own border/background class. Start with
Very well. I'll get started on that.
To those who come after me -
You should use border skin in your css file, instead of background skin. I don't know why background skin doesn't work, but it doesn't.