My image won't show up in CSS but will in HTML

Question

So, I have a website I'm making for school. I'm trying to add an image in CSS so I can add style's to them, but it won't show. The linking is absolutely fine since when I type any letters in the div I'm using for the image, it shows up in the parameters of the text! This is confusing, so i'll show you:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HELLO</title>
</head>
<body>
    <div class="fullImg">
<!-- if I say something like 'HI' in this div, part of the image shows up, but not without it! -->
</div>
</body>
<style type="text/css">
    .fullImg {
        background-image: url('img.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
            }
</style>
</html>

score 1 · Accepted Answer · answered Apr 30 '20 at 00:47

Without any content your div has a height of 0, therefore no background image is visible. You’ll need to do something to ensure the div has a nonzero height. There are a variety of ways to do it, including setting height: 100vh or min-height: 400px. Setting height: 100% is ineffective if the containing element has zero height.

score 1 · Answer 2 · answered Apr 30 '20 at 01:12

1

You should place stylings in the head element of the page

answered Apr 30 '20 at 01:12

Chris Morgan

66
5

score 0 · Answer 3 · answered Apr 30 '20 at 01:42

0

You have to put the following CSS style rule before .fullImg

html, body {
    height: 100%;
}

answered Apr 30 '20 at 01:42

Abdulrahman Mohammed

26
1

My image won't show up in CSS but will in HTML

3 Answers3