FreewayTalk

5 replies to this thread. Most Recent

Steve Gunther

4 Mar 2019, 11:03 pm

[Pro] Scroll over image

Hey folks

I just cant figure something out.

I am using the Serenity template, and it has a (tiled) and scroll-over image (not sure the exact technical term). I have replaced that with my own image, and because its people in it, turned tiling off, and size as Auto.

But you can see, the image does not fill the box. And its cut off half way - doesn’t show their elbows. I have tried many resolution sizes, makes no difference at all.

How do I get the image to fill that box, and still scroll over it?

Stuck.

Www.relationalparenting.com

grantsymon

5 Mar 2019, 11:18 am

I’m guessing this is a Page Background image? You need to resize the image to be as large (wide) in pixels, as your window. Open your image in Preview.app and choose Adjust Size… from the Tools menu, then save and add it via the Inspector in FW.

Grant

David Owen

5 Mar 2019, 12:08 pm

The problem in CSS terms you’ve got `background-attachment: fixed;’ which means the background image does not cover/resize to fill the contain and does not centre the image and is positioned top left.

In Freeway that’s the tick box… “background scrolls” You can’t have cover and scroll.

Of course your focal point of the image is not quite centred making the effect odd at narrow sizes.

On 4 Mar 2019, at 23:03, Steve Gunther <[email protected]> wrote:

Hey folks

I just cant figure something out.

I am using the Serenity template, and it has a (tiled) and scroll-over image (not sure the exact technical term). I have replaced that with my own image, and because its people in it, turned tiling off, and size as Auto.

But you can see, the image does not fill the box. And its cut off half way - doesn’t show their elbows. I have tried many resolution sizes, makes no difference at all.

How do I get the image to fill that box, and still scroll over it?

Stuck.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

David Owen

5 Mar 2019, 12:15 pm

You could start overriding the position of the background image and different breakpoints.

For example background-position-y: -90px; pulls the faces into view on desktop.

Add this into the div HeaderWrapper > Extended > Style

On 4 Mar 2019, at 23:03, Steve Gunther <[email protected]> wrote:

Hey folks

I just cant figure something out.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

David Owen

5 Mar 2019, 12:32 pm

…My error the image is actually centred it’s just the focal point that is making it look off centre.

David Owen { Freeway Friendly Web hosting and Domains }

http://www.ineedwebhosting.co.uk | http://www.PrintlineAdvertising.co.uk

On 5 Mar 2019, at 12:08, David Owen <[email protected]> wrote:

which means the background image does not cover/resize to fill the contain and does not centre the image and is positioned top left.

www.ineedwebhosting.co.uk

Freeway Friendly Web Hosting, Domain Names, VPS and Dedicated Servers. (Create an account it’s Free!)


PrintlineAdvertising.co.uk

Print Design, Digital and Litho Printers, Promotional Merchandise and Corporate Gifts.

Back to Top

Steve Gunther

5 Mar 2019, 3:10 pm

Thanks

Hmm, heres what I did. I made sure the background image in the header is exactly the pixel size - 1200 x 457. But it seems worse if anything.

I somehow dont understand what I am doing wrong.

In the Inspector box, first tab: Align: Center Width: Fixed % [100%] Height: Flexible

In the second tab: Horizontal: Center Vertical: Center Tile: Neithers Size: Auto