CSS包含+部分不在屏幕上的位置

Question

I want to fit a background image, using the css background-size: contain; properties, but position it partially off-screen. I have an image with a transparrent part and I would like to be able to manipulate the "fill", so I thought moving a background image into view would be a good way to achieve this:

.bottle {
    background-image: res://bottle_fill;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: 50% 30%;
}

But it seems that with the contain parameter, the image can't "overspill" from the div? I tried adding overflow: hidden but it didn't help. How can I achieve this? A JavaScript solution is fine if there isn't a css way.

Update:

https://jsfiddle.net/ghhxddnj/ here is a JSFiddle - try to get the smiley face half on, half off the screen, whilst it is sized contain . As noted by some of the comments, I know this is a slightly strange thing to want to do, but the background image must be the same size as the contents of the div (and <image> sized with the contain parameter) the raw files are the same size, hence if they both use contain, they will come out the same size and I can set x align to be center and then use y align to control how much of the bottle is full.

Answer 1

Try this:

var image_url = $('#logo').css('background-image'),
    image;

// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    // just in case it is not already loaded
    image.src = image_url;
    var imgoffset = image.height;
    $('#logo').css('background-position',-imgoffset)
}

Source: How do I get background image size in jQuery?

EDIT: https://jsfiddle.net/ckf55axs/