0

I am trying to add a background image and my teacher was trying to explain what to do but it still wouldn't work.

<!DOCTYPE html>
<html>

<head>
  <style>
    background-image: url("https://imgur.com/sJTAxQG");
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>group project</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
   <audio id="myAudio">
    <source src="8d82b5_Star_Wars_Main_Theme_Song.mp3" type="audio/mpeg">
      </audio>
  <canvas id="myCanvas" width="480" height="320"></canvas>
  <script>
   
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var background = new Image();
    background.onload = function(){
    background.src = 'https://imgur.com/sJTAxQG';
    ctx.drawImage(background,0,0);

Everytime I try to run it, nothing happens

ColinKing
  • 1
  • All you've added is the CSS instructions, but no selector. The [Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) determines what element(s) will be affected by the CSS. – Scott Marcus Feb 27 '23 at 18:49

1 Answers1

-1

This is because your requested resource https://imgur.com/sJTAxQG is a HTML page not a raw image (content type is text/html), and only raw image can be loaded with <img> tag or used as a background-image in CSS.

To get a raw image, use this link instead: https://i.imgur.com/sJTAxQG.jpeg (I found this link in the inspect menu where the website uses it to display the the image)

Ruochen Jia
  • 1
  • 1