image won't appear on the webpage - html

Question

I have added a few images on my html but it doesn't show up on the webpage. The directory path for the images are correct and the first image appeared before i added the rest. I thought it was something to do with the height so i added height on the css but still nothing.
Not sure if it helps to figure out without the images but i have pasted my codes below:
<section class="pictures">
<div class="container">
<div class="row1">
<div id="first" class="img1" style="background-image:url(images/page-1_img1.jpg);">
</div>
<div id="second" class="img2" style="background-image:url(images/page-1_img2.jpg);">
</div>
</div>
<div class="row2">
<div id="third" class="img3" style="background-image:url(images/page-1_img3.jpg);">
</div>
<div id="fourth" class="img4" style="background-image:url(images/page-1_img4.jpg);">
</div>
<div id="fifth" class="img5" style="background-image:url(images/page-1_img5.jpg);">
</div>
</div>
</div>
</section>
CSS:
.container {
height: 500px;
width:1024px;
}
Thank you.

Answer 1

Since you are using the images as background-images, you have to define at least a height (preferably also a width) for all their containers, i.e. #first, #second etc.
Otherwise (since they don't have any other content) those elements will have zero height, so the background-images will remain invisible
Addition: Actually, it makes more sense to use img tags instead of using the images as background-images, if you are not aiming at any special solution that requires background-images. If you insist on using background-images, you also have to define their size and no-repeat.