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
Display:None VS Visibility:Hidden VS Text-Indent:9999 How Screen Reader Behave with Each One
Difference Between Width and Device-Width in CSS Media Queries
Open a File in Visual Studio's CSS Source Editor
Are There Any Practical Reasons to Use "Em" Instead of "Pt" Font Size Units
What Are Good Uses of the CSS 'Content' Property
Ampersand (Parent Selector) Inside Nested Selectors
Fixed Header Position in Bootstrap 3 Modal
Any Way to Use CSS Variables in SASS Functions
Moving Dotted Border Using CSS
Variable Name Error "Is Undefined" Even Though "Variables.Less" Imported
Position Absolute and Bottom 0
CSS Sibling Selectors (Select All Siblings)