Why when I add an image in my CSS/HTML code, it tiles it over and over again?

Question

What I'm trying to say is that when I want to add an image, it does it over and over again, like this:

(I'm making a Frogger game btw using js/css/html) You might have to zoom in to see it.

How can I make it without that? I want to do this:

Any help will be appreciated. I think the problem is in the CSS. Also, answer my other question: Is it because I didn't add padding or a margin?

Here is my code:

/* frog */
.frog {
  background-color: darkgreen;
  background-image: url(https://www.smspower.org/uploads/Sprites/Frogger-GG-Frog-Toberescued.png);
}

Also, please don't think about the background color thing. It's fine and I want it there.

Manas Khandelwal · Answer 1 · 2021-03-25T07:06:22.450

0

It is happening because the image is smaller than the background so to cover up the space it repeated it self.

Add background-repeat: no-repeat; to the .frog:

/* frog */
.frog {
  background-color: darkgreen;
  background-image: url(https://www.smspower.org/uploads/Sprites/Frogger-GG-Frog-Toberescued.png);
  background-repeat: no-repeat;
}

Is it because I didn't add padding or a margin?

No!

To increase the size of the image add background-size: [size];:

The size can be anything like: 50%, 80px, 2rem.

/* frog */
.frog {
  background-color: darkgreen;
  background-image: url(https://www.smspower.org/uploads/Sprites/Frogger-GG-Frog-Toberescued.png);
  background-repeat: no-repeat;
  background-size: 30px;
}

edited Mar 25 '21 at 07:06

answered Mar 25 '21 at 06:56

Manas Khandelwal

3,790
2
11
24

it worked! also do you know how I can make it just a little bigger? – Dive Inside Tech Mar 25 '21 at 06:58
@DiveInsideTech Do you want to cover the whole container or make it a little big. – Manas Khandelwal Mar 25 '21 at 06:59
a little bit bigger? as in so that i can see because right now it looks like this: – Dive Inside Tech Mar 25 '21 at 07:02
@ManasKhandelwal try to give background-size to .frog for a little bigger image. Like background-size: 24px 26px; – AfifeBetul Mar 25 '21 at 07:05

AfifeBetul · Answer 2 · 2021-03-25T07:12:46.290

0

Because background-repeat is repeat by default. You should add to your code background-repeat: no-repeat.

/* frog */
.frog {
  background-color: transparent;
  background-image: url(https://www.smspower.org/uploads/Sprites/Frogger-GG-Frog-Toberescued.png);
  background-repeat: no-repeat;
}

edited Mar 25 '21 at 07:12

answered Mar 25 '21 at 07:00

AfifeBetul

136
6

thank you so much i never knew this! if ur muslim - jzk allah! – Dive Inside Tech Mar 25 '21 at 07:03
do u know how i can make images transparent, but only the background of the image? – Dive Inside Tech Mar 25 '21 at 07:06
@DiveInsideTech you should change background-color: darkgreen; to background-color: transparent; – AfifeBetul Mar 25 '21 at 07:09
@DiveInsideTech edited of my code – AfifeBetul Mar 25 '21 at 07:14
thank you, but i already know that, but i figured it out now thank you so much however! – Dive Inside Tech Mar 25 '21 at 07:15

Why when I add an image in my CSS/HTML code, it tiles it over and over again?

2 Answers2

No!