CODEWITHSUNDEEP
htmlcssbackground-image
14wml
14wml

Reputation: 4166

Why is background image not showing up for footer?

As seen in the image below, my background image for the footerImage div for my footer are not showing up, even though there is a clearly defined height (50px) and width (100%) for the div as shown by the green border. Why? How do I fix this?

Note: It's NOT an image path issue because I can pull up a preview of the image in Brackets.

My footer:

HTML:

<ul>
    <li>
        <a href="" target="_blank"> <figure>
            <div class = "footerImage resume"> </div>
            <figcaption>Resume</figcaption>
        </figure></a>
    </li>
</ul>

CSS:

.footerImage {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 50px;
    border: 1px solid green;
}

.footerImage .resume {
    background-image: url('../images/resume.png');
}

Upvotes: 3

Views: 1964

Answers (3)

ab29007
ab29007

Reputation: 7766

edit this css for your div

.footerImage.resume {
    background-image: url('../images/resume.png');
}

since they are both classes of the same div their should be no gap between .footerImage and .resume

Upvotes: 8

Gene Sescon
Gene Sescon

Reputation: 300

Remove the space between .footerImage and .resume

.footerImage.resume {
    background-image: url('../images/resume.png');
}

or you can just use

.resume {
    background-image: url('../images/resume.png');
}

Upvotes: 2

Nitheesh
Nitheesh

Reputation: 19986

The class that you have applied is written is wrong . You need to use .footerImage.resume instead of .footerImage .resume Please look at the sample code.

<!DOCTYPE html>
<html>

<head>
    <style>
        .footerImage {
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            width: 100%;
            height: 50px;
            border: 1px solid green;
        }
        
        .footerImage.resume {
            background-image: url('http://weknowyourdreams.com/images/bird/bird-06.jpg');
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <a href="" target="_blank">
                <figure>
                    <div class="footerImage resume"> </div>
                    <figcaption>Resume</figcaption>
                </figure>
            </a>
        </li>
    </ul>
</body>

</html>

Upvotes: 4

Related Questions