I'm facing an issue with setting an image as the background of the banner section on my website. Despite trying various solutions and researching similar problems, I haven't been able to resolve it. Specifically, I am attempting to set the background image for the BFinner-Event section. My website is built on Shopify, and I have uploaded the image to the assets folder. I've also attempted linking the background-image URL to (assets/banner.png), but that approach hasn't worked either.
Here is the code snippet I am working with:
<section class="BFinner-Event">
<div class="BFimgContainer">
{% if section.settings.image != blank %}
<img src="{{ section.settings.image | img_url: '300x300'}}" alt="img" class="BFimgContainerimg">
{% else %}
{% capture current %}{% cycle 1,2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg'}}
{% endif %}
</div>
<input type="text" value="15Off" id="BFdiscountCode" style="display: none;">
<button class="BFButton" onclick="copyDiscount()">{{section.settings.BFButtonText}}</button>
<div class="BFtwoContainer">
<div class="BFthreeContainer">
<div class="BFfourContainer">
<h1 class="BFconTitle">{{section.settings.title}}</h1>
<div style="color: white;"> {{section.settings.description}} </div>
<a href="{{section.settings.button_link}}" class="#">{{section.settings.button_label}}</a>
</div>
</div>
</div>
</section>
<span class="copySpan" id="copied"></span>
<style>
.BFinner-Event {
display: flex;
align-items: center;
justify-content: center;
margin-top: 30vh !important;
/* background-color: #f2f2f2; */
height: 15vh;
/* background: black; */
/* background-image: url ({{ 'banner.png' | asset_img_url: 'original' }});
background-size: cover; */
background-image: url ('banner.png');
}
@media only screen and (min-width: 1480px) {
.BFtwoContainer {
max-width: 60%;
}
}
@media only screen and (max-width: 1479px) {
.BFtwoContainer {
max-width: 70%;
}
}
@media only screen and (max-width: 1220px) {
.BFtwoContainer {
max-width: 60%;
}
}
.BFconTitle {
margin: 0;
color: white;
/* display: flex;
justify-content: center; */
}
.BFimgContainer {
height: 175%;
transform: scale(1.25);
}
.BFimgContainerimg {
height: 100%;
}
@media only screen and (min-width: 1040px) and (max-width: 1480px) {
.BFinner-Event {
height: 20vh;
}
}
@media only screen and (max-width: 640px) {
.BFinner-Event {
height: 25vh;
display: flex;
flex-direction: column;
}
@media only screen and (max-width: 320px) {
.BFinner-Event {
height: 22vh;
}
}
@media only screen and (max-width: 640px) {
.BFButton {
transform: translateY(-45%) !important;
}
}
@media only screen and (min-width: 250px) and (max-width: 759px) {
.BFtwoContainer {
max-width: 90%;
margin: 0 10vw 0vh 10vw;
}
}
@media only screen and (max-width: 680px) {
.BFtwoContainer {
margin: 0 10% 0 0;
}
}
@media only screen and (max-width: 640px) {
.BFtwoContainer {
top: -5vh;
position: relative;
margin: 0 5% 0 5%;
transform: translateY(20%);
}
}
@media only screen and (max-width: 640px) {
.BFconTitle {
display: flex;
justify-content: center;
}
}
@media only screen and (max-width: 680px) and (min-width: 148px){
.BFimgContainer {
position: relative;
}
}
}
@media only screen and (max-width: 640px){
.BFimgContainer {
height: 70%;
top: -5vh;
}
}
</style>