Hi, this site www.footprintse.com uses images that take up the full screen. When the browser is resized they stay in the centre and still take up the full screen. Can anyone please tell me how this can be achieved in Webflow? I find that if a background image is added and set as cover it fills the screen but moves up and down as the window is resized so parts of the image are cut off.
Thanks
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
They use a complex set of CSS to make the overflowed content centered.
As for bg, you can easily set where the anchor should be:
http://vincent.polenordstudio.fr/snap/19ld6ti.jpg
Also, you can add a bit of custom CSS to mimick the bg-image options on images. See the filling options at the bottom of this page http://clipping-masking.webflow.io/
Thanks very much Vincent. Will give that a go.
Come back for more halp or it those possible solutions don’t play well. Don’t forget to include your read-only link.
BTW I looked again at your reference, their images behave exactly like a bg-image with the anchor centered-bottom.
Using bg-image for that is what everybody does (except a few like these guys). And that’s not a good practice. When your image IS the content, when it has a meaning beyond decoration, it needs to be an image, it needs to be in the HTML, not the CSS, and have a proper alt tag etc. So if you’re in this case, try using images, not bg-images.
We really need that object-fit supported by WF soon!
Considering it will push designer to build with better respect of the accessibility, yes!