How to Position Background Image in Bottom Right Corner? (Css)

How to position background image in bottom right corner? (CSS)

Voilà:

body {
   background-color: #000; /*Default bg, similar to the background's base color*/
   background-image: url("bg.png");
   background-position: right bottom; /*Positioning*/
   background-repeat: no-repeat; /*Prevent showing multiple background images*/
}

The background properties can be combined together, in one background property.
See also: https://developer.mozilla.org/en/CSS/background-position

Trouble setting an image to the bottom right corner in the background using css

Why don't you add this in your CSS file and remove div from HTML.

body { 
    background-image: url('file_location.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom; 
}

Example: FIDDLE

Background position can be anything like left bottom or right center.

How to cut a corner with CSS when background image is necessary?

You may use before/after element to make the bottom part like this :

.profile {

position:relative;

display:inline-block;

margin:50px;

border:1px solid #000;

border-bottom:none;

width:100px;

height:200px;

background:#ccc;

}

.profile:after {

content:" ";

position:absolute;

border:1px solid #000;

height:20px;

width:80px;

bottom:-20px;

right:-1px;

border-top:0;

border-left:0;

background:#ccc;

}

.profile:before {

content:" ";

position:absolute;

border-bottom:1px solid #000;

height:29px;

width:29px;

transform:rotate(45deg);

bottom:-15px;

left:6px;

background:#ccc;

}

<div class="profile"></div>

Offset a background image from the right using CSS

I found this CSS3 feature helpful:

/* to position the element 10px from the right */
background-position: right 10px top;

As far as I know this is not supported in IE8. In latest Chrome/Firefox it works fine.

See Can I use for details on the supported browsers.

Used source: http://tanalin.com/en/blog/2011/09/css3-background-position/

Update:

This feature is now supported in all major browsers, including mobile browsers.

---

Related Topics