Shopify: How to show feature image background like collection page in news posts

Question

Hello sir i wanna change the header section of posts page and want them to look like collection page featured image background. let me explain in detail.

This is the collection page URL with featured image. https://shoeslik.myshopify.com/collections/all

in this page featured image shown as background of title.

Here is the news post page. https://shoeslik.myshopify.com/blogs/news/ways-to-select-shoes-to-wear-with-an-outfit

feature image is already set but i want to edit some code to make the header look like above collection page.

and i am using Debut theme.

One more thing to add i have seen that the collection page feature background image height is 300px but i want the news posts background image size 400px.

here is what i have done so far

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-image: url('{{ article.image | img_url: '300x300' }});"></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ article.image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
          <h1 class="collection-hero__title page-width">{{ article.title }}</h1>
        </div>
      </div>

above code is the collection page so i copy it and its scss is already used with other div also and i change it little to fit needs. but i can't actually able to do exactly look like collection page. I also can't able to add author name and publish date in background area. You may check the links and can guide me what to do. Waiting for your kind help.

thanks

Amir Amir · Accepted Answer · 2020-03-31T07:40:16

Well now this question is solved while adding some css like this.

body.template-article article.page-width {
padding-left: 0px;
padding-right: 0px;
margin: 0px;
width: 100% !important;
max-width: 100% !important;
}
body.template-article .collection-hero__image {
height: 400px;
}
.section-header.text-center.blogs-heders+.collection-hero__image:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #685858;
opacity: 0.4;
}

Shopify: How to show feature image background like collection page in news posts

1 Answers