Make a image banner section overlay with another at the top

In the image banner section, paste the following in custom css:

@media screen and (min-width: 750px){

.banner {

  position: relative;

  z-index: -20;

  margin-top: -180px;

  padding-bottom: 50px;

}}

• Related Articles

• How to change another image for image banner in mobile view

  In theme.liquid, add the followings: <style> #shopify-section-ID { @media (max-width: 768px) { .banner__media { content: url("image URL") !important; } } </style>

• Different height for mobile and desktop hero image banner

  1. In the section, custom CSS 2. Insert the following code: @media screen and (max-width: 749px) { .banner__media { padding-top: 10%; padding-bottom: 10% !important; } }

• How to make image-with-text image smaller

  In the custom css of the section, add in: .image-with-text .image-with-text__media-item.image-with-text__media-item--small img { height: 70%; width: 70%; margin: 15%; }

• Full width text for image banner on desktop

  In custom css, add the following: @media only screen and (min-width: 750px) { .banner--content-align-left.banner--desktop-transparent .banner__box { max-width: 100% !important; } }

• Create a Video Background section

  Create the section snippet, create a new snippet named: video-background.liquid and copy the following liquid into it. {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%} {%- assign img_url = block.settings.image | img_url: '1x1' | ...