Banner

These are commonplace in most websites. Typically designed as an image with text layered over. This snippet creates a responsive hero-style banner (using Flexbox) that can be fully edited using WebYep. Javascript code is used to convert a WebYep image element into a CSS background; therefore providing more options to adjust the image positioning and automatically apply a tinted gradient. If the author provides ALT text with the image, this is applied as a little caption, which could be a pleasing finishing touch or useful to display a photograph credit. Consider adding a button to the hero content, if you want to present this as a call-to-action.

Example

HTML & PHP

<header id="banner">
  <?php webyep_image("Banner Image", false, 'id="banner_image"', '', '', 1500, 1000, false, 0, 0, 600, 270); // WebYepV2 ?>
  <div id="banner_content">
    <h1>
      <?php webyep_shortText("Master Heading", false, 550, 240); ?>
    </h1>
    <h2>
      <?php webyep_longText("Tagline", false, "", true, 600, 400); ?>
    </h2>
  </div>
</header>

CSS

#banner {
  min-height: 40vh;
  background-color: #ccc;
  background-size: cover;
  /* If you want a parallax scrolling effect...
  background-attachment: fixed;
  */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}

#banner_image {
  display: none;
}

#banner .WebYepImageEditButton {
  position: relative;
  z-index: 1;
}

#banner_content {
  align-self: center;
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 650px;
  margin: 3rem 0.5rem;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  padding: 0.5rem 0;
}

#banner_content h1 {
  color: rgba(255, 255, 255, 0.9);
  padding: 0;
  margin: 0 0 1rem 0;
  font-weight: normal;
  font-size: clamp(1.5rem, 3vw, 4rem);
  font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}

#banner_content h2 {
  color: rgba(255, 255, 255, 0.8);
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: clamp(1.25rem, 1.5vw, 2rem);
  line-height: 1.5;
  font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}

#banner_caption {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #000;
  color: #eaeaea;
  font-size: 0.9rem;
  padding: 0.25rem;
}

Javascript

const bannerContainer = document.querySelector('#banner');
if (document.querySelector('#banner_image') !== null) {
  const imageSrc = document.querySelector('#banner_image').src;
  bannerContainer.setAttribute('style', `background-image: url(${imageSrc});`);
  // Start caption code, delete if not required
  if (document.querySelector('#banner_image').alt !== "") {
    const imageAlt = document.querySelector('#banner_image').alt;
    bannerContainer.innerHTML += `${imageAlt}`;
  }
  // End caption code
}