user1885868 user1885868 - 6 months ago 9
HTML Question

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!

Answer

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.