'How to align image in right bottom corner

How to places image in page bottom right corner.

<div id="background-img" class="background-img" ></div>

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

I created the background image with 1px image. Now I have to I have to place company logo in page bottom right corner how to do this..

Any suggestion and how to code this one.. Advances Thanks...

htmlcss


Solution 1:[1]

You could use absolute positioning:

position: absolute;
right: 0px;
bottom: 0px;

Solution 2:[2]

You can use position: fixed; bottom: 0px; right: 0px; which makes sure that your company logo is always visible at bottom right corner - this means that page scrolling is not affecting its position.

or

You can use position: absolute; bottom: 0px; right: 0px; which makes sure that your company logo is placed to a certain location and it is affected by the scrolling of the page.

I created a fiddle which demonstrates the differences, JsFiddle example

Solution 3:[3]

Use position fixed if you want your code to be positioned relative to window other wise ose position: absolute if you want it to position relative to document.

Relative to screen:

.background-img{

    position:fixed;
    right:10px;
    bottom: 10px 
}

Relative to document

.background-img{

    position:absolute;
    right:10px;
    bottom: 10px 
}

Solution 4:[4]

you could try this

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

with

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

Solution 5:[5]

I belive this should also do it:

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

There's also a background-position css 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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lumiukko
Solution 2
Solution 3 Anoop
Solution 4 Rachel Gallen
Solution 5

Related Questions