I have tried both the “Full Background Image” and the “Full Background - Proportional” and have not been able to achieve the results present at this sample link, teletech.com.
Want the image to keep aspect ratio and fill the screen not cut off at the bottom. It appears the example is scaling top to bottom not left to right as well as keeping aspect ratio and filling the screen. How could this be done?
Apply Protaculous to your page. Draw an HTML box on the page and
import your “background” image into it as pass-through, and send that
HTML box to the back. Set its Position to Fixed in Window in the
Inspector, and move it to top-left on the screen. Note the name of the
box (not the image) as reported in the Title field of the Inspector
while the HTML box is selected on screen.
Set the library picker in the Protaculous Action to prototype-packed.
Click on the top Function Body button, and paste in the code from my
Gist. Replace ‘origDiv’ (near the bottom of the code) with the title
of your actual HTML box.
Preview in a browser to see the result. This code considers the
scaling in both axes, and works to keep the entire screen full of
image. If you use a square-ish or screen-proportioned image, you
should get the best of all worlds.
Walter
On Feb 25, 2011, at 10:30 AM, TeamSDA wrote:
I have tried both the “Full Background Image” and the “Full
Background - Proportional” and have not been able to achieve the
results present at this sample link, teletech.com.
Want the image to keep aspect ratio and fill the screen not cut off
at the bottom. It appears the example is scaling top to bottom not
left to right as well as keeping aspect ratio and filling the
screen. How could this be done?
Walter, the script works great. Tested on IE 7 and works there as well. Did notice that the RPL action causes the image to shift to the right. We just wont use RPL unless you have another suggestion.
Apply the Remove from RPL Action to this “background” image. That
should allow you to have your cake and eat it too.
Walter
On Feb 25, 2011, at 1:15 PM, TeamSDA wrote:
Walter, the script works great. Tested on IE 7 and works there as
well. Did notice that the RPL action causes the image to shift to
the right. We just wont use RPL unless you have another suggestion.
MobileSafari doesn’t support Fixed in Window positioning at all. So
this trick won’t work in that context. You could add a line of code to
hide the image, and set a background color or some other fallback
image as a real background image for that case.
In regards to fixed in window what about when we use an html box that is fixed left and right at 0 px so it will stretch. The middle and bottom box’s on the link are done this way and seem to work on the iPhone.
That’s a different trick. You’re still using Position: Absolute in
that case, not Position: Fixed. Position: Absolute won’t work for this
exact application on the iPhone because you can’t get the background
to stay still while the page scrolls over it.
Walter
On Feb 25, 2011, at 2:31 PM, TeamSDA wrote:
In regards to fixed in window what about when we use an html box
that is fixed left and right at 0 px so it will stretch.
Just realized that we may have an issue as we are wanting to build this particular site as box model so we can have some stretchy elements. Is there a way to apply the code to a page background image.
No. Page backgrounds don’t behave that way at all. There’s a CSS3
property called background-size, but I haven’t tried using it, and all
that I’ve seen about it says it’s pretty fiddly to use. Guaranteed not
to work on IE.
Walter
On Feb 25, 2011, at 6:40 PM, TeamSDA wrote:
Hi Walt,
Just realized that we may have an issue as we are wanting to build
this particular site as box model so we can have some stretchy
elements. Is there a way to apply the code to a page background image.