How to align an image on css?

css, html

Solution

#picture { 
 background-image:url('no-bullying.jpg');
 height:100px;
 width:50px;
 position: absolute;
 bottom:10px;
 left:10px;
}

Problem

I want to put an image on the left side of my Home page. I know how to do it in html but I want to create it in a CSS class. I don't know what I need to do to fix it. The picture I want is called Nobullying.jpg HTML: ``` <html> <head> <link rel="stylesheet" type="text/css" href="body.css"/> </head> <body> <h1>Bully-Free Zone</h1> <h2>"Online harassment has an off-line impact"</h2> <!--Menu-->I <div id="nav"> <a href="mainpage.htm" class="nav-link">HOME</a> <a href="page1.htm" class="nav-link">ASSISTANCE</a> <a href="page2.htm" class="nav-link">CYBER-BULLYING SIGNS</a> <a href="page3.htm" class="nav-link">REPORT</a> </div> <div id="picture"></div> <!--Copyright--> <div id="center"> <td> Copyright © 2012 Bully-FreeZone.com</td> </div> </body> </html> ``` Css class: ``` #picture{background-image:Nobullying.jpg; width:40px; height:40px; } ``` This is where I want the picture. (Red box) https://i.stack.imgur.com/XMyVo.jpg

Original source