无需拉伸即可重复CSS背景图像

问题描述 投票:0回答:4

有没有办法使用重复图像创建平铺背景而不拉伸和改变大小?

我有一个模式,我用作背景。但是我想在整个网站上一致地显示它。目前,模式正确重复,但根据容器的大小延伸。

html css
4个回答
0
投票

是的,您可以使用属性background-repeat

body {
background-image: url("images/background.jpg");
background-repeat: repeat;
}

它会拉伸,因为当容器具有不同的大小时,您不会更改背景的宽度和高度

值重复:背景图像垂直和水平重复

使用值repeat-x:水平重复背景图像

使用值repeat-y:垂直重复背景图像

我希望它有所帮助。


0
投票

仅供参考其他可能发现自己遇到此问题的人...

这是因为我使用的是SVG。更改为常规图像文件,现在一切都很好。


0
投票

使用下面的css:

div{
  background-image: url("images/background.jpg");
  background-size:auto auto;
  background-repeat:repeat;
 }

0
投票
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<style>
    div{
        background:url('https://www.w3schools.com/w3css/img_fjords.jpg') repeat center;
        height:2000px;
        border:2px solid red;
        background-size:contain
    }
</style>
</head>
<body>

<div></div>

</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.