-
AuthorPosts
-
August 11, 2021 at 5:10 pm #1316298
Hello,
how can I add a full width background image in tag archive page?
I see a very basic editor with no access to ALB
I tried to generate an header in another page with ALB and paste its code in the tag editor HTML textarea, but it does not work.Thank you
Mauro- This topic was modified 3 years, 3 months ago by Mike.
August 14, 2021 at 10:43 pm #1316764Hey profumopuntoit,
Thank you for your patience, I see that your page is a woocommerce archive page, so you would go to that category and upload a thumbnail and choose Display product image and description as fullwidth page banner
then you will have a full width banner on the frontend for the category
Please note that Tags don’t have this option, but the shop page does in the theme options, you can also set one banner for all category pages.
Best regards,
MikeAugust 26, 2021 at 7:05 pm #1318502Thank you Mike,
as it is not possible via Enfold interface, I did it with a bit of HTML and CSS
It is not portable code, easy to reuse, but it works.
I hope that Enfold will add this functionality in a future release<div class=”jmb-full-width-image”></div>
<p class=”jmb-full-width-image-paragraph1″>Our Gourmand</p>
<p class=”jmb-full-width-image-paragraph2″>Perfumes</p>.jmb-full-width-image-paragraph1 {
margin-top: -165px;
margin-bottom: 204px;
color: #f2f9bd;
padding-left: 10px;
font-size: calc(19px + 2vw);
}
.jmb-full-width-image-paragraph2 {
margin-top: -145px;
margin-bottom: 81px;
color: #f2f9bd;
padding-left: 10px;
font-size: calc(19px + 2vw);
}
.jmb-full-width-image {
background: url(/wp-content/uploads/gourmand-perfumes1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 400px;
margin-top: -36px;
margin-left: -50px;
padding: 0;
outline: none;
}The interesting point is
width: 100vw;
that set the width of the image at 100% of the viewportAt the moment it works correctly in the staging site where I had to modify the width in Enfold settings => General Layout => Maximum Container width from 1310px to 100%, in the production site I did not do this modification yet, because I am afraid that it could break something.
Setting Maximum Container width to 100% can have some weird effect? From the staging site it does not seem so
Thank you
MauroAugust 27, 2021 at 12:52 pm #1318641Hi,
Thank you for sharing your snippet, perhaps others will also find it helpful, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Header with full width background image in tag archive page’ is closed to new replies.