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; 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.
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.
(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.