CODEWITHSUNDEEP
htmlcssbackground-image
Crackers_and_Ham
Crackers_and_Ham

Reputation: 21

Background Image loaded but not displaying

I'm probably being idiotic here. I've been trying to get a jpeg image to load in the background of a section element as part of a bootstrap course I'm doing (pretty new to this web dev stuff). The image is loading fine in the firefox inspector - it shows no errors and displays the image if I hover over the link - but it just isn't displaying on the page.

Here's the relevant code:

<secton id="cover">
    <div id="cover-caption">
        <div class="container">
            <div class="col-sm-10 sm-offset-1"></div>
            <h1>Generic website title</h1>
        </div>
    </div>
</secton>

css:

#cover{
    background: url("Assets/Photos/Blanket.jpg") center center no-repeat;
    background-size: cover;
    text-align: center;
    height: 100%;
}

The path and name of the image is definitely correct, so it's not that.

Any ideas?

Upvotes: 1

Views: 36

Answers (1)

Crackers_and_Ham
Crackers_and_Ham

Reputation: 21

Fixed it! As expected, immediately after posting.

Apparently setting the height to 100% was the issue. Changing it to 100vmin made all the difference.

Baby steps...

Upvotes: 1

Related Questions