Geek asks and answers

How to align image on css?

I want to put the image on the left side of my home page. I know how to do this in html, but I want to create it in a CSS class. I do not know what I need to do to fix this. The photo 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;
   }

That's where I want the picture. (Red box) http://imgur.com/Ef2Au

+3
source share
5 answers
#picture { 
 background-image:url('no-bullying.jpg');
 height:100px;
 width:50px;
 position: absolute;
 bottom:10px;
 left:10px;
}
+6
source

Adjust your CSS like this:

#picture{
   background-image:url('/path/to/Nobullying.jpg');
   width:40px; height:40px;
   position: absolute; /* this removes it from document flow */
   left: 5px; /* this places image 5px away from the leftmost area of the container */
              /* you can choose from left/right and top/bottom for positioning */
              /* play around with those and you should get a hang of how it works */
}

Remember: when you use css background images, the path goes from the point of view of the css file (and not the html file in which css is included).

So, if your directory structure was like

root
--> css    -> styles.css
--> images -> Nobullying.jpg
--> index.html

Then your path can be url('../images/Nobullying.jpg')either `url ('/images/Nobullying.jpg');

+3

fixed, .

#picture{
    background: url(Nobullying.jpg) no-repeat;
    width:40px;
    height:40px;

    position: fixed;
    bottom:10px;
    left:10px;

}

url() no-repeat .

+2

You have a syntax error in your rule background-image. Alternatively, you can use position:absoluteto place an item.

#picture{
    background-image: url(Nobullying.jpg);
    width:40px;
    height:40px;
    position:absolute;
    left:10px;
    bottom:10px;
}
+1
source 
#picture{
   background-image:url(Nobullying.jpg);
   width:40px; height:40px;
   float:left;
   }

I used the ID here not for the class. The image must be identified with the identifier "picture".

In CSS, this is a bit complicated when you use float. If you can already do this in html, just use html. Otherwise, you will have to learn a few additional things.

Answer updated

0
source

More articles:


All Articles