我的背景图像不工作/出现

Question

所以我有一个横幅部分，其中我想要一个图像作为横幅的背景。我尝试了多种解决方案，通过阅读其他人有类似的问题，但没有一个对我有效…我试图在部分BFinner-Event上设置背景图像。我使用shopify，并将图像上传到资产文件夹。我也试过链接背景图像的url到(assets/banner.png)，但也没有工作。

下面是我的代码:

<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>

Answer 1

这里的问题是url和background-image上的左括号之间的空格。财产。

替换:

background-image: url ('banner.png');

With(去掉空格):

background-image: url('banner.png');

如果你删除空格，它应该工作正常。希望对你有帮助。

Answer 2

添加背景的简单方法是:

.yourClass{
background: url("https://tpc.googlesyndication.com/simgad/3248856506927570682");
background-repeat: no-repeat;
background-size: cover;
}

将URL替换为您自己的图像，并确保图像的URL是正确的，并在新窗口加载。其他属性只是临时的，你可以用你的需求来替换。