CSS background-position 100% (right) not working as expected

Question

I have a simple div with width less than 100%, with a background image having background-position 100% 0. Instead of the bg image sticking to the right side of the div, it is getting cut off, and seems to think its actual right position is the edge of the body, not the div whose background it is.

.bg {
    width:80%;
    height:500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 100% 0;
    background-size: 50%;
    background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}

I made a fiddle for it: http://jsfiddle.net/bobmeador/j2MWX/ The upper element shows the problem. Below is the full image so you can see what is getting cut off.

Any idea why it seems to be using the parent for its positioning rather than the div it belongs to?

I have the same result when my .bg div is set to width 100% and it is inside a div set to 80% width. It seems to be ignoring any container widths and just using the overall body width for its 100% reference.

Chris Chris · Accepted Answer · 2014-01-31T21:03:11

I tihnk the problem is this background-attachment: fixed;, if you remove it the image aligns perfectly to the right.

http://jsfiddle.net/j2MWX/2/

CSS background-position 100% (right) not working as expected

1 Answers