Editable Full-screen Banner Image Workaround?


#1

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.

Thanks!

Steve


#2

My guess is whoever has a solution doesn’t need me to post my CSS, but here’s the basic banner structure…

<!-- Banner -->
<section id="banner" class="subpageBanner" style="background-image:none;"> 
    <!-- Banner BG Image Container -->
    <div class="bgContainer"> 
      <img id="untitled-region-1" class="subpageBG editable" src="../images/BG-banner-template-1920.jpg" alt="" /> 
    </div>
    <!-- Banner Heading Content -->
    <div class="inner">
        <header class="major">
            <h1 class="editable" id="untitled-region-2">A Big, Bold Blog Title</h1>
        </header>
        <div class="content">
            <p class="editable" id="untitled-region-3">A Subtitle for SEO and Context Purposes</p>
        </div>
    </div>        
</section>

#3

Hey! You should try using object-fit on an image tag! Browser support isn’t amazing but there’s a really good polyfill.
.bgContainer > img { object-fit: cover; }


#4

Very cool property that I haven’t used before. Will spend some time playing with it and reading through the links you provided (appreciated).

Do you know off the top of your head if there’s a secondary attribute comparable to background-position that would allow me to center vertically and horizontally?


#5

I think it’s object-position, works exactly the same as background-position!


#6

This might get you towards the right direction:
Background size cover / contain simulate with img tag — Codepen ›
Look after the code for other solutions.

HTML:

<div class="cover">
  <img src="https://www.google.fr/images/srpr/logo11w.png">
</div>

CSS

.cover {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.cover > img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
  overflow-x: hidden;
}

There’s a few more ways of doing it here › on CSS-Tricks … basically the methods people used before background-size: cover; was available.

Also, it might be worth looking into vmin and vmax units: 7 CSS Units You Might Not Know About ›