How to align the image in the lower right corner

How to place the image in the lower right corner of the page.

<div id="background-img" class="background-img" ></div> .background-img{ background:url('images/bg-img.png'); width:100%; height:698px; repeat-x; } 

I created a background image with a 1px image. Now I need to place the company logo in the lower right corner of the page, how to do it.

Any suggestion and how to encode it .. Reaches Thanks ...

+7
source share
5 answers

You can use absolute positioning:

 position: absolute; right: 0px; bottom: 0px; 
+10
source

You can use position: fixed; bottom: 0px; right: 0px; position: fixed; bottom: 0px; right: 0px; , which ensures that your company logo is always displayed in the lower right corner - this means that scrolling the page does not affect its position.

or

You can use position: absolute; bottom: 0px; right: 0px; position: absolute; bottom: 0px; right: 0px; , which ensures that your company’s logo is placed in a specific place and is affected by the scrolling of the page.

I created a fiddle that demonstrates the differences, JsFiddle example

+4
source

Use a fixed position if you want your code to be positioned relative to the position of another wise ose: absolute, if you want it to be positioned relative to the document.

Regarding the screen:

 .background-img{ position:fixed; right:10px; bottom: 10px } 

Regarding the document

 .background-img{ position:absolute; right:10px; bottom: 10px } 
+1
source

you can try this

  <div class="outer"> <img src="...."> </div> 

from

  div.outer { position: relative; height: 24px; } div.outer img { position: absolute; right: 0; bottom: 0; } 
+1
source

I believe this should also be done:

 .background-img { width:100%; height:698px; background: url('images/bg-img.png') repeat-x 0 0; } 

There is also a css background-position property.

 .background-img { background:url('images/bg-img.png'); width:100%; height:698px; repeat-x; background-position: bottom right; } 

http://www.w3schools.com/cssref/pr_background-position.asp

0
source

All Articles