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

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

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 its 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.

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

Leave a Reply

Your email address will not be published.