Reputation: 43
I'm having trouble getting an image to repeat in HTML/CSS. I'm very new to this so I might have made a basic mistake but I can't for the life of me figure out what it is.
I've made a div in my index.html
...
<body>
<div class="bakgrund"></div>
</body>
...
And my CSS-file:
.bakgrund {
background-image: url("img/bakgrund.png");
height: 200px;
width: 200px;
}
The image is displayed but only once. What I want to do is for the image to repeat vertically and horizontally. This works perfectly when I define the background image in the body tag and not as a div, is it possible?
Upvotes: 0
Views: 1093
Reputation: 1663
If your background image size large than div size please set the background size like this.
.bakgrund {
background-image: url("https://www.w3schools.com/cssref/paper.gif");
background-repeat: repeat;
height: 200px;
width: 200px;
background-size: 20px 20px;
}
<body>
<div class="bakgrund"></div>
</body>
Upvotes: 2
Reputation: 4433
The default value of background-repeat is already repeating but if if you need to repeat the background image by css in ...? try this
.bakgrund {
background: url("img/bakgrund.png") repeat;
height: 200px;
width: 200px;
}
Upvotes: 1