CODEWITHSUNDEEP
htmlcss
user1885868
user1885868

Reputation: 1093

Display Image CSS

I have a problem displaying images in the bottom of my web page.

This is what I want :

Wanted

But it fails to load the images.

This is my code :

index.html

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.scss">
        <title>Hello World</title>
    </head>
    <body>
        <header class="header">
            Mon App de Météo
        </header>
        <section class="view">

        </section>
        <nav class="nav">
            <a href="#home"><i class="home"></i></a>
            <a href="#about"><i class="about"></i></a>
        </nav>
    </body>
</html>

style.css

.header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    background-color: #11a7ab;
}

.nav{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #4f597b;
}

.home{
    background-image: url('../img/icon/home.png');
    background-repeat: no-repeat;
}

.about{
    background-image: url('../img/icon/about.png');
    background-repeat: no-repeat;
}

a{
    display: block;
    width: 50%;
    float: left;
}

And this is the hierarchy :

hierarchy

The console doesn't show any errors which makes me wonder what did I do wrong ?

Thanks!

Upvotes: 0

Views: 40

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

If that is all your CSS, the problem is that the empty <i> elements have no size, so the background images have a 0x0 space to work with. Solution: give the i elements the size of the icons explicitly.

Upvotes: 2

Related Questions