user1885868 user1885868 - 2 years ago 105
HTML Question

Display Image CSS

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

This is what I want :


But it fails to load the images.

This is my code :


<!DOCTYPE html>

<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>
<header class="header">
Mon App de Météo
<section class="view">

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


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

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

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

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

display: block;
width: 50%;
float: left;

And this is the hierarchy :


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


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download