<div> not displaying background image

Issue

In my css file, I have an id named "homehero", which displays a background image.

#homehero 
    {
        background-image: url("images/coast.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

In my html file, I have a div that uses this id to display the image; however, the image does not appear whatsoever.

<div id="homehero"> <!-- Home Page Image -->
    <!-- <img src="images/coast.jpg" width="100%" height="100%" alt="A Sunny Coastline"> -->
    <!-- Old line of html that displayed the same image, but converted to css id. -->
</div> <!-- End of Home Page Image -->

The full html file can be found here.

The full css file can be found here.

Edit: The image is displayed when setting it as the background image for another element, it is only in this id where the issue occurs.

Solution

I would suggest below changes,

#homehero 
    {
        background-image: url("images/coast.jpg");
        width:300px; 
        height:300px;
        background-size: cover;
        background-repeat: no-repeat;
    }

Where, your image will be cover and if you specifies width and height it would be good and also your image will not be repeat as no-repeat property is used.

Answered By - Alap Joshi