I have an image banner embedded from Contentful to another page (BigCommerce/Shogun) but the banner is getting cut off. See attached image and CSS. Thank you in advance
enter image description here

    padding: 15px 5px;
    margin-bottom: 15px;
    overflow: visible !important;
    background-image: url("https://images.ctfassets.net/p62egiw5uahp/56FxF0pvFweTKNW0McKYgX/439a1dcdc828e8edeb05d2a75459f2a6/BF_desktop_11.24.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;

<span id="clp-furniture-multiLinkBanner"><div style="padding: 15px 5px;margin-bottom: 15px;overflow: visible !important;background-image: url(&quot;//images.ctfassets.net/p62egiw5uahp/56FxF0pvFweTKNW0McKYgX/439a1dcdc828e8edeb05d2a75459f2a6/BF_desktop_11.24.jpg&quot;);background-repeat: no-repeat;background-size: cover;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: center;"><div style="color: white; display: flex; flex-direction: column; text-align: center;"><a href="#" style="text-decoration: none;"><h4 style="color: black; font-size: 22px; line-height: 32px; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; font-family: NeutrafaceText-Demi;"></h4><h1 style="color: black; font-size: 68px; line-height: 68px; font-weight: normal; margin-top: 0px; margin-bottom: 5px; font-family: &quot;Para Supreme Normal&quot;;"></h1><h4 style="color: black; font-size: 24px; line-height: 32px; margin-top: 8px; font-family: NeutrafaceText-Book; margin-bottom: 0px; white-space: pre-wrap;"></h4></a></div></div></span>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In CSS, the ID selector "#clp-furniture-multiLinkBanner" should contain a set width and height property. In order to add a bit more responsiveness when adjusting the dimensions of the browser window, adding a background-position property of cover would help.

See below:

#clp-furniture-multiLinkBanner {   
    padding: 15px 5px;
    margin-bottom: 15px;
    overflow: visible !important;
    background-image:       url("https://images.ctfassets.net/p62egiw5uahp/56FxF0pvFweTKNW0McKYgX/439a1dcdc828e8edeb05d2a75459f2a6/BF_desktop_11.24.jpg");
    background-repeat: no-repeat;
    background-position: cover;
    background-size: contain;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 100vh;
}

<span id="clp-furniture-multiLinkBanner"><div style="padding: 15px 5px;margin-bottom: 15px;overflow: visible !important;background-image: url(&quot;//images.ctfassets.net/p62egiw5uahp/56FxF0pvFweTKNW0McKYgX/439a1dcdc828e8edeb05d2a75459f2a6/BF_desktop_11.24.jpg&quot;);background-repeat: no-repeat;background-size: cover;display: flex;flex-wrap: wrap;justify-content: space-evenly;align-items: center;"><div style="color: white; display: flex; flex-direction: column; text-align: center;"><a href="#" style="text-decoration: none;"><h4 style="color: black; font-size: 22px; line-height: 32px; margin-top: 0px; margin-bottom: 0px; text-transform: uppercase; font-family: NeutrafaceText-Demi;"></h4><h1 style="color: black; font-size: 68px; line-height: 68px; font-weight: normal; margin-top: 0px; margin-bottom: 5px; font-family: &quot;Para Supreme Normal&quot;;"></h1><h4 style="color: black; font-size: 24px; line-height: 32px; margin-top: 8px; font-family: NeutrafaceText-Book; margin-bottom: 0px; white-space: pre-wrap;"></h4></a></div></div></span>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The banner image is larger than the "height" you are giving it. If you change the padding to 140 px, you will see more of the picture.