I’ve been looking for a reasonable solution (or workable hack) to build in an editable background image in the banner section of a page template in Surreal - Likely using some jQuery.
Probably obvious, but here’s the story: I have a few clients that are using a page template to add new content through Surreal. From a design standpoint, it’s pretty standard for us to use a large background image in the banner section at the top of the page (real cutting-edge stuff here =). Outside of the CMS, a simple background-size: cover in the CSS handles this well for 95% of cases, but obviously Surreal doesn’t give the client an solution to edit the CSS.
Now I can use position:absolute on an image that would be editable, but the problem comes down to aspect ratio of the viewport and keeping some semblance of responsiveness without completely limiting the client’s image choices.
For example, for landscape oriented screens, you’d simply set the absolutely positioned image to width:100%, but as soon as that page is viewed on mobile (portrait oriented), the image won’t fill the container vertically. You can set the absolutely positioned image to height:100% and overflow:hidden, but that severely limits image choices since a landscape image is going to have roughly 2/3rds of the image cut off on mobile viewports.
Probably making this way more complicated than it needs to be. Checking to see if anyone’s worked out a reasonable solution already before I start writing some god-awful script to start checking viewport orientation, etc.