HTML CSS, Background Image Won't Load

Question

My background image for the div won't load in even thou everything is correct, it'll only load when I type something on it.

HTML Code ~

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body>

<div id="Header">



</div>

</body>
</html>

CSS Code

body {

    background-color: #FEF991;
    margin: 0px;
    paddng: 0px;

}

#Header {

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

}

The files are correct and everything but it'll only load in when I write something I have no idea why or how to fix it.

is A.png located within an image folder or main project directory? Also you may want to give some width and height dimensions to #header — Samuel
– Samuel, Commented May 16, 2020 at 15:52

netsentry · Accepted Answer · 2020-05-16 15:56:13Z

2

The container will compute to a 0px if there are no explicit dimensions provided for it or content. Applying a height to your #Header element will fix your problem.

answered May 16, 2020 at 15:56

netsentry

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ROOT · Accepted Answer · 2020-05-16 16:01:25Z

0

Your header doesn't have height or width, and by default it will not be displayed until you add some HTML elements to it or adding style height and width, try adding this to header style:

#Header {
    background-image: url("A.png");
    height: 100px;
    width: 100%;
}

working snippet:

body {
  background-color: #FEF991;
  margin: 0px;
  paddng: 0px;

}

#Header {
    background: rgba(0, 0, 0, 0.5);
    height: 100px;
    width: 100%;
}

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="Index.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald&family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body>

<div id="Header">


</div>

</body>
</html>

answered May 16, 2020 at 16:01

ROOT

11.7k5 gold badges35 silver badges49 bronze badges

1 Comment

ROOT Over a year ago

Glad to help, please consider accepting answer if you find any of the answers useful :)

Noor Ul Ain · Accepted Answer · 2020-05-16 16:12:13Z

0

This is because the div's height is 0%. whenever you add some text to it, div's size increases and so you are able to see the background image.

answered May 16, 2020 at 16:12

Noor Ul Ain

1

Collectives™ on Stack Overflow

HTML CSS, Background Image Won't Load

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related