Repeating CSS background images without stretching

问题

Is there a way create a tiled background using a repeating image without it stretching and changing size?

I have a pattern which I am using as a background. However I want this to display consistently throughout the site. Currently the pattern repeats correctly, but stretches depending on the size of the container.

回答1:

Yes, you can use the property background-repeat

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

it strech because you dont change the width and height of the background when the container have a diferent size

with the value repeat:the background image is repeated both vertically and horizontally

with the value repeat-x:The background image is repeated horizontally

with the value repeat-y:The background image is repeated vertically

I hope it helps.

回答2:

Just for reference to anyone else who might find themselves with this problem...

It was because I was using a SVG. Changed to a regular image file and now everything is fine.

回答3:

Use this css below:

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

回答4:

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

来源：https://stackoverflow.com/questions/48978553/repeating-css-background-images-without-stretching

标签

html

css