Can't get a background image on my HTML/JS page

Question

Here is the code, i can't get an image of a cake on the body, or the entired html. I've tried HTML like body background, I've tried style , and I've tried js, nothing works. Funny thing, I've tested the image on other pages, loads fine. I've also tried modifying the background color using html, css, js, they all work fine. But the damn image won't load. Any ideas?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Age Calculator</title>
</head>
<body>


  <style>
    #myDiv {
      background-image: url('images/cake.png');
      background-size: cover;
    }

    </style>

<div id="myDiv">
<script>

//document.body.style.backgroundImage = "url('images/cake.jpg')";
//document.getElementById("myDiv").style.backgroundImage =     "url('images/cake.jpg')";  


let birthYear = prompt("Enter Your Birth Year");
let birthMonth = prompt("Enter Your Birth Month (As A Number)");
let birthDay = prompt("Enter Your Birth Day");
let date = new Date();
let currentYear = date.getFullYear();
let currentMonth = date.getMonth() + 1;
let currentDay = date.getDate();
let yearAge = currentYear - birthYear;
let monthAge = currentMonth - birthMonth;
let dayAge = currentDay - birthDay;
let monthPluralizer = "";
let dayPluralizer = "";

if (monthAge === 1) {
  monthPluralizer = "Month";
} else {
  monthPluralizer = "Months";
}

if (dayAge === 1) {
  dayPluralizer = "Day";
} else {
  dayPluralizer = "Days";
}

if (currentMonth < birthMonth) {
  monthAge = monthAge + 12;
  yearAge = yearAge - 1;
}

if (currentDay < birthDay) {
  monthAge = monthAge - 1;
  if (currentMonth === 1 || 3 || 5 || 7 || 8 || 10 || 12) {
    dayAge = dayAge + 31;
  } else if (currentMonth === 4 || 6 || 9 || 11) {
    dayAge = dayAge + 30;
  } else if (currentMonth === 2) {
    dayAge = dayAge + 28;
  }
}

if (currentMonth == birthMonth && currentDay < birthDay) {
  monthAge = monthAge + 12;
  yearAge = yearAge - 1;
}


document.write("<p>Your Birth Date Is " + birthMonth + "/" + birthDay + "/" + birthYear + "</p><br>");
document.write("<p>Today's Date Is " + currentMonth + "/" + currentDay + "/" + currentYear + "</p><br>");
document.write("<p>You Are " + yearAge + " Years, " + monthAge + " " + monthPluralizer + " & " + dayAge +
  " " + dayPluralizer + " Old.</p><br>");
if (birthMonth == 0 && birthDay == 0 && birthYear == 0 ) {
  document.write("<p>Hello Jesus!<p>")
} else if (birthMonth === null && birthDay === null && birthYear === null ) {
  document.write("<p>Hello Jesus!<p>")
}





</script>
</div>
</body>
</html>

as you have used a relative url, make sure the images folder is relative to the url that is calling it — Pete, Sep 27 '18 at 14:43
Tested your code and the image is showing correctly, maybe it's case problem (eg. Cake.png and not cake.png...)? — Moïze, Sep 27 '18 at 14:43
Thanks Enzo, everyone who says the path is wrong, i have paths similar in my general css file that reference the same image folder from the same location. they all work fine. ive checked the case, even changed the file to a png. still cant get it to open. on my HTML main page, which has a separate js file and css file, i can add the image no problem. this web page is designed as a js project in my portfolio, all on one page (html w style and script embedded). is there some reason the pic wont go in due to my HTML being written by a document.write method? i think thats the culprit — sao, Sep 27 '18 at 20:37

score 2 · Accepted Answer · answered Sep 27 '18 at 15:09

Your image path is wrong.

Try This:

   #myDiv {
      background-image: url('./images/cake.png');
      background-size: cover;
    }

If don't work let me know

You can read more about the HTML Paths here and see another post like yours in this question here

score 1 · Answer 2 · answered Sep 27 '18 at 15:04

1

Your image path is not correct and you should change the path. you can see how to define the path in here

answered Sep 27 '18 at 15:04

Mahdi khodabandelu

152
3
19

Can't get a background image on my HTML/JS page

2 Answers2