When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line:
background-image: url(flappybird.png);
I also attempted another variation with single quotations:
background-image: url("flappybird.png");
Unfortunately, even after ensuring proper syntax by adding semicolons and quotation marks, the image failed to display on the page. Additionally, I experimented with adding z-index=10000000 to the character, but this did not resolve the issue.
Can anyone provide insight into what I might be doing incorrectly? I can confirm that the image is named correctly as flappybird.png and exists in the root folder.
Suggestions were made in the comments to try resizing the image using background-size: cover, which helped to some extent. However, it still didn't address the main problem of fitting the image according to our specifications. Adjusting the width and height only seemed to uncover or cover the image without actually resizing it.
It's important to note that if we are using an image, it should resize appropriately. The current code snippet below does reveal the image when modifying the width and height, but it doesn't resize correctly:
#character{
width:60px;
height:50px;
/*background-color:green;*/
background-image: url(flappybird.png);
position:relative;
top:320px;
background-size: cover;
/*animation: jump 300ms */