Full Window Background Image

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?

Thanks, TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Did you look at this code:

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?

Thanks, TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you Walter, I will give this a try.

Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I seem to have it working. Do I only change the second instance of origDiv, the one after the $ sign. That seems to do the trick?

//change this variable to match your layout
var origDiv = $(‘origDiv’).resizeImg();

//resize the image on browser resize
Event.observe(window, ‘resize’, function(){ origDiv.resizeImg(); });

TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, exactly. I’ll update the Gist to make it clearer.

Walter

On Feb 25, 2011, at 12:34 PM, TeamSDA wrote:

I seem to have it working. Do I only change the second instance of
origDiv, the one after the $ sign. That seems to do the trick?

//change this variable to match your layout
var origDiv = $(‘origDiv’).resizeImg();

//resize the image on browser resize
Event.observe(window, ‘resize’, function(){ origDiv.resizeImg(); });

TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Thanks,
TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Thanks,
TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Awesome… That did the trick

Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walt,

Just tested on the iPhone and the image displays at its native size. Does not fill background.

Thanks, TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

if(Prototype.Browser.MobileSafari) origDiv.hide();

Add that as the very last line of code inside the Function Body window.

Walter

On Feb 25, 2011, at 1:39 PM, TeamSDA wrote:

Hi Walt,

Just tested on the iPhone and the image displays at its native size.
Does not fill background.

sutherlanddesignagency.com/Test/Chris/Background/test.html

Thanks, TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK… I will use your fix.

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.

What is going on here?

Thanks, TeamSDA_Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Thanks
Dave


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options