时间戳

首页 > 解决方案 > 如何停止在 CSS 中重复图像？

html - 如何停止在 CSS 中重复图像？

问题描述

如何停止在 CSS 中重复图像？请帮忙，

为什么当我在 CSS 中输入图像时，图像会重复？

CSS 代码

header{
  background-image: url(originalMattress.jpg);
  text-align: center;
  padding: 5px;
  height: 450px; 
}

HTML 代码

<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to capers global onsite customer reviews</p>
</header>

标签： htmlcssbackground-image

解决方案

将background-size属性设置cover为此将使您的背景适合其容器，并且background-repeat这no-repeat将防止您的背景重复以下是

例子

header{
    background-image: url(originalMattress.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 5px;
    height: 450px; 
}
<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to caspers global onsite customer reviews</p>
</header>

推荐阅读