Search code examples
cssbootstrap-4background-image

Cannot display background-image

I have the following div:

<div class="col-lg-5 ml-lg-auto">                            
    <div class="image-container">
        <img class="table-img" src="/img/home.png" alt="">
    </div>
</div>

essentially I would like to display a background-image in .image-container, so I have created the following class:

.image-container {
    height: 100%;
    width: 100%;
    background-image: url(../img/car.png);
}

the folder structure looks like this:

/ source
    / img
    / css

when I inspect .image-container I get the correct url and when I open this in a new window I can see the file, also if I specificy here background-image: url('https://somesite.com/image.png'); the image in the container is displayed, so seems like a relative url issue but I can't see the problem here.

Solution

  • Most likely the proble is the height setting of .image-container: It's 100%, but 100% of what? If the parent container doesn't have a defined height, and if the div itself has no contents, its height will result being 0, so you won't see anything. To try if that applies, set height to a fixed pixel value. If you then see the background image, the problem is definitely the height setting.