Post by J on Oct 5, 2016 14:45:18 GMT
To center a page background image you can simply set its image position to Top Center on the site.theme page. If you use a really wide image, this gives you that infinite background look - as the browser window is expanded, more of the background image is revealed while remaining locked in position, pinned to the page center point.
This all works fine, until the browser window is reduced to a size narrower than the page width. As the browser attempts to keep the image centred in the window, it begins to drift away from the page center - which might not be the effect you're looking for.
How can I keep the background image fixed to the page center point?
One cool solution is to place a single Panel object at the top of the site.theme page.
The Panel has a background image assigned to it - the exact same background image that's also assigned to the Page background.
Both the Page and the Panel have their background image position set to Top Center. As a result, whenever the browser window becomes narrow, any drift in the page background is simply hidden behind the Panel - so the illusion of a pinned-to-center background is maintained.
A demo explains it better than words - take a look at the attached project to see how it all fits together:
background-center.ata (83.2 KB)
When you preview the page in your web browser, notice how the smiling face in the background image remains directly over the page center point, no matter how wide or narrow you make the browser window.
Cheers,
J
This all works fine, until the browser window is reduced to a size narrower than the page width. As the browser attempts to keep the image centred in the window, it begins to drift away from the page center - which might not be the effect you're looking for.
How can I keep the background image fixed to the page center point?
One cool solution is to place a single Panel object at the top of the site.theme page.
The Panel has a background image assigned to it - the exact same background image that's also assigned to the Page background.
Both the Page and the Panel have their background image position set to Top Center. As a result, whenever the browser window becomes narrow, any drift in the page background is simply hidden behind the Panel - so the illusion of a pinned-to-center background is maintained.
A demo explains it better than words - take a look at the attached project to see how it all fits together:
background-center.ata (83.2 KB)
When you preview the page in your web browser, notice how the smiling face in the background image remains directly over the page center point, no matter how wide or narrow you make the browser window.
Cheers,
J
