CSS contain + position partially off-screen

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.

This sort of thing is discussed in [this other question](http://stackoverflow.com/questions/21786272/css-background-size-cover-background-attachment-fixed-clipping-background-im). — Ouroborus, Apr 07 '16 at 22:38
@Bodzio Sure, [https://jsfiddle.net/ghhxddnj/](https://jsfiddle.net/ghhxddnj) - try to get the smiley face half on, half off the screen — George Edwards, Apr 07 '16 at 22:39
@Ouroborus I may have misunderstood that question, but I think they are trying to avoid clipping, which is what I am after? — George Edwards, Apr 07 '16 at 22:41
the goal of this question isnt clear in my opinion, i didnt understand. what is the issue and the expected result on that fiddle? — L777, Apr 07 '16 at 22:43
@freestock.tk I want to be able to position a background image partially on, partially off screen, so you can only see part of it, whilst using the contain size property — George Edwards, Apr 07 '16 at 22:46
but this off-screen part is the opposite behavior of the `background-size: contain;` property (where the element always fits 100% inside the container); if you want crop, so youre looking for `background-size:cover;` instead — L777, Apr 07 '16 at 22:48
@freestock.tk No, I want the size to be dictated by `contain`, as the background image size must be the same as the `` size, so it must have the size `contain`, or a JS equivalent. — George Edwards, Apr 07 '16 at 22:51
`**contain**Scale the image to the largest size such that both its width and its height can fit inside the content area` You can't use contain if you want the background to be bigger than it's container, the entire point of the contain size is to make sure the background fits IN the container — Gavin Thomas, Apr 08 '16 at 09:06
@GavinThomas I don't want the background image to be bigger than the background, I just want it positioned partially off-screen. So I can gradually move it onto the screen until the bottle is "full" and the background image is positioned in the middle of the div. — George Edwards, Apr 08 '16 at 09:14
@GavinThomas I think that only works if my image is square? In my actual application, I am using rectangles... Also, this needs to be responsive, and % don't seem to work with that approach? — George Edwards, Apr 08 '16 at 09:20
Not at all. 100vh and 100vw is based on the screen size - if you have a rectangular image, you can just get the ratio right and set the `vh` accordingly. — Gavin Thomas, Apr 08 '16 at 09:22
@GavinThomas but it stretches images, see https://jsfiddle.net/ghhxddnj/7/ — George Edwards, Apr 08 '16 at 09:25
@GavinThomas is there any way for it to work with percentage positions? — George Edwards, Apr 08 '16 at 09:57
You could just use `vw` positioning? As 1vw = 1% of the screen width, same for 1vh = 1% of screen height. — Gavin Thomas, Apr 08 '16 at 09:59
@GavinThomas Well I need to act in relation to the height of the image, not the screen, but I guess that by using JS to get the actual height of the image I could then calculate the vh offset? However, [this](https://jsfiddle.net/ghhxddnj/11/) JSFiddle isn't getting the element height - `Cannot read property 'offsetHeight' of null` any ideas? If that can work, then please feel free to post an answer for me to accept — George Edwards, Apr 08 '16 at 12:29

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

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/

edited May 23 '17 at 10:28

Community

1
1

answered Apr 08 '16 at 12:47

Gavin Thomas

1,196
6
10

Can we do it without JQuery? Also, I don't need to get the background image size, the image tag, which can have a class or id, will be the same size, so if that is simpler. – George Edwards Apr 08 '16 at 12:50
So your element isn't going to be a background image, or is your offset being set by a static amount, not dependent on the elements height? I'm lost in what you want now.. – Gavin Thomas Apr 08 '16 at 12:54
Sorry for being confusing, I have an image of a bottle outline. I want to show the bottle filling up, by moving a background image up behind it. So 1. I need the background image to be the same size as the bottle outline. 2. need to be able to move the background up and down, to show different bottle fill levels, to do this, I need to know how heigh the bottle outline is. Does that make sense? – George Edwards Apr 08 '16 at 12:56
So the BACKGROUND is being defined on how big the element is? – Gavin Thomas Apr 08 '16 at 12:57
well yes, but by setting it to cover, or an equivalent, then it will be the right size, but the position WILL be dictated by the size of the foreground image. – George Edwards Apr 08 '16 at 13:01
So why not just set the size of the element instead, and have the container wrap to it? – Gavin Thomas Apr 08 '16 at 13:08
I am using NativeScript to write a native mobile app, so I don't have access to full html and the container I am using is defined as a grid, which depending on the width to height ratio of the mobile device will change in proportions. – George Edwards Apr 08 '16 at 13:11

CSS contain + position partially off-screen

Update:

1 Answers1