Question

我的背景图像的响应性和外观存在问题。

＆＃13;

#about {
  background-image: url(http://i65.tinypic.com/suxzj8.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.about-text {
  font-family: "montserrat-regular", sans-serif;
  text-align: justify;
  text-justify: inter-word;
  margin-left: 25%;
  margin-right: 20%;
  color: black;
}

＆＃13;

<section>
  <div id="about">
    <br><br>
    <div class="about-text">
      <p>We are , an integrated communications partner delivering advertising, creative and BTL solutions. We provide not just solutions but provide them in a way that is crisp, clean and simple in order to attract the consumers’ attention and drive home the message at the same time. We also believe in integrated communications where your brand is in sync with your marketing. We create<span span style=font-weight:bold;color:black><font size=4> advertising designs, provide creative, BTL and print solutions</font></span>. We're here to make your business stand out from the crowd.<br><br>
      We are a group of professionals having worked in various organisations in different positions. We have seen the advertising world in and out. Our team has all the potential to create advertising campaigns that work well in the market.</p>
    </div>
  </div>
</section>

＆＃13;

Codepen

如果我出错了，请你纠正我。

Answer 1

你的#about元素不像body / html那么高。

只需将CSS声明应用于body，例如：

＆＃13;

body {
  background-image: url(http://i65.tinypic.com/suxzj8.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.about-text {
  font-family: "montserrat-regular", sans-serif;
  text-align: justify;
  text-justify: inter-word;
  margin-left: 25%;
  margin-right: 20%;
  color: black;
}

＆＃13;

<section id=about>
  <br><br>
  <div class="about-text">
    <p>We are , an integrated communications partner delivering advertising, creative and BTL solutions. We provide not just solutions but provide them in a way that is crisp, clean and simple in order to attract the consumers’ attention and drive home the
      message at the same time. We also believe in integrated communications where your brand is in sync with your marketing. We create<span span style=font-weight:bold;color:black><font size=4> advertising designs, provide creative, BTL and print solutions</font></span>.
      We're here to make your business stand out from the crowd.<br><br> We are a group of professionals having worked in various organisations in different positions. We have seen the advertising world in and out. Our team has all the potential to create
      advertising campaigns that work well in the market.</p>
  </div>
</section>

＆＃13;

Answer 2

如果您希望#about拥有此背景，并且希望显示整个图片，则可以尝试使用background-size: contain;

#about {
background-image:url(http://i65.tinypic.com/suxzj8.jpg) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
min-height: 500px;
}
.about-text {
font-family:"montserrat-regular",sans-serif;
text-align:justify;
text-justify:inter-word;
margin-left:25%;
margin-right:20%;
color:black; 
}

在响应方面，我可能会在分辨率足够小时删除该图像。你可以试试下面的东西。

#about {
background-image: url(http://i65.tinypic.com/suxzj8.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
min-height: 500px;
}
.aboutUs {
display: none;
}

.about-text {
font-family: "montserrat-regular", sans-serif;
text-align: justify;
text-justify: inter-word;
margin-left: 25%;
margin-right: 20%;
color: black;
}

@media (max-width:768px) {
#about{
background-image: none;
}
.aboutUs {
display: block;
background-color: #387438;
color: white;
padding: 10px;
}
}

然后你的html将如下

<section id="about">
<br><br>
        <div class="about-text">
          <h1 class="aboutUs">about us</h1>
        <p>We are , an integrated communications partner delivering advertising, creative and BTL solutions. We provide not just solutions but provide them in a way that is crisp, clean and simple in order to attract the consumers’ attention and drive home the message at the same time. We also believe in integrated communications where your brand is in sync with your marketing. We create<span span style=font-weight:bold;color:black><font size=4> advertising designs, provide creative, BTL and print solutions</font></span>. We're here to make your business stand out from the crowd.<br><br>
        We are a group of professionals having worked in various organisations in different positions. We have seen the advertising world in and out. Our team has all the potential to create advertising campaigns that work well in the market.</p>
        </div>
 </section>

在我的例子中，如果res低于768px，它将删除背景图像并以通用样式显示我们。您当然可以根据需要进行更改。您还应该考虑删除br代码并添加一些padding或margins。我还设置了min-height:500px，您也可以根据自己的需要进行更改。希望这会有所帮助。

Updated pen

Answer 3

只需更改“background-size：cover;” 到

#about{
  background-size: 100% 100%;
}

背景图像无响应＆amp;完全显示

3 个答案: