Full Background Proportional and 100% height

Hello!

Sorry if this sounds long-winded, considering its simplicity…

I’m using the ‘full page proportional’ action on my site
This action is so nearly perfect for me - it keeps the image proportional, keeps the image perfectly centred and the image fills the screen.
It effectively sets the width of the image at 100%, so the full-width of the image can always be seen, and the area at the bottom of the image may overflow depending on the proportions of the screen.

What I would like, is for to work so the height of the image is always 100%, and the width is the part that can overflow - while keeping it perfectly centred on both axis and proportional.

I opened up the page to look at the code, and quickly edited the section that says

#fwbackground { position:fixed; top:0; left:0; width:100%; }

to

#fwbackground { position:fixed; top:0; left:0; height:100%; }
and this did what I would like it to do in terms of the scaling, but no matter what, I can’t get the image perfectly centred.
And help of advice on how I could achieve this would be very much appreciated.

Thankyou very much, in advance!


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

Something like this? http://www.xiiro.com/demo/centered/index.php

I haven’t tested it (quick-n-dirty). In short, the image is 3200x1100
so to get the horizontally centered effect I set a negative left
margin of half the width, ie, 1600px. You can play around with the
positioning to get whatever position you want. View source for CSS.

Todd

#fwbackground { position:fixed; top:0; left:0; height:100%; }
and this did what I would like it to do in terms of the scaling, but
no matter what, I can’t get the image perfectly centred.
And help of advice on how I could achieve this would be very much
appreciated.


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

Not a goer in iOS I’m afraid - just see half an image.

David


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

Not a goer in iOS I’m afraid - just see half an image

I’m sure there’s a fix, when I have a moment I’ll take a look. Thanks
for checking.

Todd


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

Your code

#fwbackground { position:fixed; top:0; left:0; height:100%; }

Cant possibly work as it positions the image at the top left of the screen!

D


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

Well, position:fixed is straight out in iOS (and IE < 8 or maybe 9)
anyway…

Walter

On May 23, 2011, at 1:55 PM, DeltaDave wrote:

Your code

#fwbackground { position:fixed; top:0; left:0; height:100%; }

Cant possibly work as it positions the image at the top left of the
screen!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


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

This may be of help, at least as far as iOS is concerned <http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Todd

On May 23, 2011, at 12:58 PM, Walter Davis wrote:

Well, position:fixed is straight out in iOS


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

Hello
Thankyou for your responses
As it stands, my page looks like this:
http://www.brucebruce.co.uk/testindexten.html

(sorry, I hope my photographs don’t offend anyone!)

So, the one thing that is wrong is that the image is flush with the left side of the page, and I cannot get it to centre…
Apart from that I think/hope it displays perfectly…

And I’m not too bothered if it doesn’t display properly with iOS.

Andrew


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

I am not seeing any full backgrounds!

D


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