CODEWITHSUNDEEP
htmlcss
Backtrack
Backtrack

Reputation: 113

How to align an image on css?

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.sstatic.net/XMyVo.jpg

Upvotes: 3

Views: 299

Answers (5)

Etienne Dupuis
Etienne Dupuis

Reputation: 13786

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

Upvotes: 6

TheTechGuy
TheTechGuy

Reputation: 17354

#picture{
   background-image:url(Nobullying.jpg);
   width:40px; height:40px;
   float:left;
   }

I have used ID here not a class. The image should be identified with the ID="picture".

In CSS it gets a little tricky when you use float. If you can already do this in html, just use html. Otherwise, you will have to learn a few extra things.

The answer is updated

Upvotes: 0

Moses
Moses

Reputation: 9173

Adjust your CSS like so:

#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 is from the perspective of the css file (not the html file the css is included in).

So if your directory structure was like

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

Then your path could be url('../images/Nobullying.jpg') or `url('/images/Nobullying.jpg');

Upvotes: 3

Greg
Greg

Reputation: 31378

Or you could use fixed positioning to keep it in that position regardless of scrolling.

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

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

}

also use url() and no-repeat for the background-image.

Upvotes: 2

Josh Davenport-Smith
Josh Davenport-Smith

Reputation: 5511

You have a syntax error in your background-image rule. Besides that, you can use position:absolute to position the element

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

Upvotes: 1

Related Questions