CODEWITHSUNDEEP
javascripthtmlcssbackground-image
Compoot
Compoot

Reputation: 2377

background-image in HTML, CSS and JavaScript game not displaying

In a simple HTML,CSS and JavaScript game, I replaced (in the CSS)

background-color:green;

with

background-image: url(flappybird.png);

and I also tried: (and with single quotations)

background-image: url("flappybird.png");

but the image is not being displayed on the page. I have tried adding the semi colon and also speech marks.

I also tried adding z-index=10000000 to character, but that didn't help.

Can anyone tell me what I am doing wrong. I can confirm that the image is named correctly flappybird.png and is in the root folder.

var character = document.getElementById("character");
var enemy = document.getElementById("enemy");



function jump(){
    if(character.classlist!="animate"){
    character.classList.add("animate");
    }
    setTimeout(function(){
        character.classList.remove("animate");
    },500);
    
}

//right movement

function right() {

  var leftVal =  parseInt(window.getComputedStyle(character).getPropertyValue("left"))
  character.style.left = (leftVal + 30) + "px";

}

//left movement

function left() {

  var leftVal =  parseInt(window.getComputedStyle(character).getPropertyValue("left"))
  character.style.left = (leftVal - 30) + "px";

}




var checkDead =setInterval(function(){
    var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
    var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
    //ADD VARIABLE TO FIND CHARACTER RIGHT -if it collides with enemy left, you are out
    //remove the condition that the enemy has to be in the first 30 pixels of the game (left side)
    var characterRight =parseInt(window.getComputedStyle(character).getPropertyValue("right"));
    
 
    
    if(
        characterTop==enemyLeft //have tried characterRight==enemyLeft didn't work
    )
    {
        enemy.style.animation="none"; //remove the animation
        enemy.style.display="none";
        alert("Game Over");
        
    } 
},10);


//left
addEventListener("keydown", function(e) {
    if(e.keyCode == 37) left()
})

//jump (up)
addEventListener("keydown", function(e) {
  if (e.keyCode === 38) {
    jump()
  }
})

//right
addEventListener("keydown", function(e) {
  if (e.keyCode === 39) {
    right()
  }
})
*{
        padding:0;
        margin:22;
    }
    
    #game{
        width:500px;
        height:500px;
        border:4px solid #171918;
    }
    
    #character{
        width:30px;
        height:120px;
        /*background-color:green;*/
        background-image: url(flappybird.png);
        position:relative;
        top:320px;
        border-radius:20px;
        /*animation: jump 300ms */
        
    }
    
    /* new class called animate */
    .animate{
        animation: jump 500ms;
    }
    
    
    #enemy{
        width:60px;
        height:60px;
        background-color:red;
        border-radius:14px;
        position:relative;
        top:320px;
        le

ft:440px;
    animation: moveenemy 1s infinite linear;
    
}

@keyframes moveenemy{
    0%{left:440px;}
    50%{top:58px;}
    100%{left:0px; top:320x;}
}

@keyframes jump{
    0%{top:380px;}
    30%{top:50px;}
    50%{top:40px;}
    100%{top:380px;}
}



/* adding sky*/
#sky{
    width:500px;
    height:340px;
    background-color:skyblue;
    position:absolute;
    top:118px;
}

/* adding ground */
#ground{
    width:500px;
    height:170px;
    background-color:bisque;
    position:absolute;
    top:450px;
}
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
  <h1>Game</h1>
   <div id="game">
        <div id="sky"></div>
       <div id="ground"></div>
        <div id="enemy"></div>
       <div id="character"></div>
   </div>
   
<script src="script.js"></script>
</body>

</html>

A comment below suggests the option to resize and add background-size: cover; This works to some extent but does not solve the problem of getting the image to fit the specifications we want. Resizing the width and height here, doesn't resize - it just uncovers or covers the image.

If I was to use an image, it should also resize, and I note the width and height don't work as expected in this situation. Could that also be addressed in any answers.

The below code thus uncovers the image if I adjust the width and height, but does not resize correctly, which I cannot figure out.

#character{
    width:60px;
    height:50px;
    /*background-color:green;*/

    background-image: url(flappybird.png);
    position:relative;
    top:320px;
    background-size: cover;
    /*animation: jump 300ms */

Upvotes: 2

Views: 354

Answers (1)

epresas
epresas

Reputation: 132

Is this what you want to achieve? I added a little border to show the width problem solved.

#character {
  width: 50px;
  border: 1px solid black;
  height: 50px;
  background-color: green;
  background: url("https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fatomix.vg%2Fwp-content%2Fuploads%2F2014%2F05%2FFlappy-Bird.png&f=1&nofb=1")
    center no-repeat;
  background-size: contain;
  position: relative;
  top: 50%;
  border-radius: 20px;
  /*animation: jump 300ms */
}

Update:

The background-size: contain;rule tells the background to adjust its size to the container, without stretching it, your can read more info about the values of this rule here. If the container is bigger than the img, it might repeat, so it's wise to control it with background-repeat: no-repeat;, or use the shorthand version of background: <url> <position> <repeat>; more on that here.

About the change of the top from px to % it was purely experimental while trying to resolve your question. You can add your original value.

Upvotes: 1

Related Questions